Question

我有问题。我希望我的footer能够覆盖我页面中的所有其他内容。诀窍是我正在使用Galleria插件并且它有自己的风格，出于某种原因，即使我将z-index: 99999;放在我的footer上，它仍然不在顶部。

这是galleria容器，插件的主要部分。

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

这是我的页脚容器

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

Okey所以当我加载我的网站时它很好，我可以看到我的页脚，但是当我调整窗口大小从而执行此代码时，它会再次被隐藏。

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

Answer 1

z-indicies是相对于在同一堆叠上下文中具有z-index的其他元素。堆叠上下文由以下内容定义：

文档根目录
具有位置的元素：绝对或位置：相对和z-index
部分透明的元素，即它们具有不透明度＆lt; 1
在IE7中，任何具有position：absolute或position：relative的元素（这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器）

简单地说，只要你有一个与上述任何一个匹配的元素，堆叠上下文就是重置，而z-index只相对于那个容器。

您问题的简单答案是两件事之一：

将z-index提高得更高（某些插件使用荒谬的z-index数字）
在堆叠上下文方面确保您的页脚位于插件上方。您可能需要转到父节点以设置更高的z-indicies或将页脚从父级中拉出来。

Answer 2

可以尝试在！important上添加z-index：

.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

旧主题和旧的非jQuery方法确实如此。但是避免与任意高z索引号混淆的好方法是将对象z-index设置为页面+ 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;
}

但是使用快速的jQuery方法会很好。

Answer 4

该插件可能会在您的页脚后附加到正文。我会看看是否有一个选项可以在页脚之前插入它（以使其在IE＆lt; 8上看起来正确）并确保页脚具有更高的z-index，并且页脚的父级不使用静态定位。

将元素放在一切之上

4 个答案: