jquery - 将元素置于一切之上

Question

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

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

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

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

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

Answer 1

z-indicies 是相对于同一堆叠上下文中具有 z-index 的其他元素的。堆叠上下文定义为:

• 文档根目录
• 具有 position: absolute 或 position: relative 和 z-index 的元素
• 部分透明的元素，即它们的不透明度 < 1
• 在 IE7 中，任何具有 position: absolute 或 position: relative 的元素(这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器)

简单地说，只要您有一个元素符合上述任何条件，堆栈上下文就会重置，并且 z-index 仅与该容器相关。

您问题的简单答案是以下两件事之一:

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