Make an item on top of everything

Question

I have a problem. I want my footer be on top of everything else on my page. The trick is that I use the Galleria plugin, and it has its own style, and for some reason, even if I put z-index: 99999; on my footer , he's still not on top.

This is the container galleria, the main div of the plugin.

 .galleria-container { overflow: hidden; width: 960px; /* This value is changed by JS */ height: 520px; /* This value is changed by JS */ min-width: 960px; } 

This is my footer container

 #footer { z-index: 9999; width: 700px; height: 500px; position: absolute; background-color: aqua; } 

Okey, so when I load my site, it’s fine and I can see my footer, but when I resize windows by executing this code, it hides again.

 $(".galleria-container").css("width", $(window).width()); $(".galleria-container").css("height", $(window).height()); 

Answer 1

z-pointers refer to other elements with z-index in the same stacking context. The context of the stack is determined by:

• Document root
• Elements with position: absolute or position: relative and z-index
• Elements that are partially transparent, i.e. have an opacity of <1
• In IE7, any element with a position: absolute or position: relative (this can cause a lot of errors, as this is the only browser that acts this way)

Simply put, whenever you have an element that matches any of the above, the stacking context is reset , and the z-index refers only to this container.

The simple answer to your question is one of two things:

• will increase the z-index even higher (some plugins use absurd z-index numbers)
• make sure the footer is above the plugin in terms of styling context. You may need to go to the parent nodes to set higher z-pointers or pull the footer out of the parent.

Answer 2

You can try adding z-index with! important on:

 .galleria-container { overflow: hidden; width: 960px; /* This value is changed by JS */ height: 520px; /* This value is changed by JS */ min-width: 960px; z-index: 9998!important; } 

Answer 3

Old theme and old method other than jQuery. But a good approach to avoid confusion with an arbitrary high z-index number is to set your z-index object to the highest index on the page + 1.

 function topMost(htmlElement) { var elements = document.getElementsByTagName("*"); var highest_index = 0; for (var i = 0; i < elements.length - 1; i++) { if (parseInt(elements[i].style.zIndex) > highest_index) { highest_index = parseInt(elements[i].style.zIndex); } } htmlElement.style.zIndex = highest_index + 1; } 

But a quick jQuery method would be nice.

Answer 4

The plugin is probably added to the body after the footer. I would see if it is possible to insert it in front of the footer (so that it looks correct on IE and 8) and make sure that the footer has a higher z index and that the parent of the footer does not use static positioning.