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());

Possibly you may have a stacking context probelm. http://tjkdesign.com/articles/everything_you_always_wanted_to_know_about_z-index_but_were_afraid_to_ask.asp — Jawad, Jul 08 '11 at 18:19
Some plugins try to find the max `z-Index` and then set theirs to be +1. Maybe Galleria is doing the same? Can you check at runtime what the `z-index` are for the element that's on top (via firebug or chrome's dev console)? — Mrchief, Jul 08 '11 at 18:20
It'll be easier if you posted the link or at least html code with all the js and css. — AR., Jul 08 '11 at 18:25

score 10 · Accepted Answer · answered Jul 08 '11 at 18:19

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.

score 1 · Answer 2 · answered Nov 06 '12 at 03:54

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.

score 1 · Answer 3 · answered Jul 08 '11 at 18:20

1

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;
}

answered Jul 08 '11 at 18:20

Ant

64
6

`!important` is evil and should only be used as a last resort if code out-of-your-control is also using it. – Jul 08 '11 at 18:22
I agree. But setting your z-index to 999999 so it's higher in the end is just as bad in my opinion. At least this way you know what's going on when you / someone else next looks at your CSS... – Ant Jul 08 '11 at 18:27

score 0 · Answer 4 · answered Jul 08 '11 at 18:26

The plugin is probably appending to the body after your footer. I would see if there's an option to insert it before the footer (as to make it look right on IE < 8) and make sure that the footer has a higher z-index, and that the parent of footer doesn't use static positioning.

Make element on top of everything

4 Answers4

Linked