CODEWITHSUNDEEP
jqueryhtmlcss
Stan
Stan

Reputation: 26511

Make element on top of everything

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

Upvotes: 8

Views: 19232

Answers (4)

Léon Pelletier
Léon Pelletier

Reputation: 2741

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.

Upvotes: 1

webXL
webXL

Reputation: 1630

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.

Upvotes: 0

Ant
Ant

Reputation: 64

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

Upvotes: 1

user578895
user578895

Reputation:

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.

Upvotes: 10

Related Questions