Make element on top of everything

Question

I have a problem. I want my footer to be on top of everything else possible in my page. The trick is that I'm using Galleria plug-in and it has it's own style and for some reason even if I put z-index: 99999; on my footer it is still not on top.

This is galleria container, the main div of the plug-in.

.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 website it is fine and I can see my footer, but when I resize windows thus executing this code it is hidden again.

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

Answer 1

z-indicies are relative to other elements with a z-index in the same stacking context. Stacking context is defined by:

• The Document Root
• Elements with position: absolute or position: relative and a z-index
• Elements that are partially transparent, that is they have an opacity < 1
• In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)

Put simply, whenever you have an element that matches any of the above, stacking context is reset and z-index is only relative to that container.

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

• raise the z-index even higher (some plugins use absurd z-index numbers)
• make sure your footer is above the plugin in terms of stacking context. You may need to go up to parent nodes to set higher z-indicies or pull your footer out of a parent.

Answer 2

Could try adding a 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 topic, and old non-jQuery method, indeed. But a good approach to avoid being confused with arbitrary high z-index number is to set your object z-index to the highest index in 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 having a fast jQuery method would be nice.