使元素位于所有内容之上

我有个问题。我想要我的footer位于我的页面中所有其他可能的内容之上。诀窍是我使用的是 Galleria 插件，它有自己的风格，并且由于某种原因，即使我把z-index: 99999; on my 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;
}

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

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

z 索引是相对于同一堆栈上下文中具有 z 索引的其他元素的。堆栈上下文定义为：

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

简而言之，只要有一个元素与上述任何一个匹配，堆栈上下文就是resetz-index 仅相对于该容器。

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

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