将元素放在一切之上

Question

我有个问题.我希望我footer能够在我的页面中处理其他所有可能的事情.诀窍是,我使用的广场插件,它有它自己的风格,因为即使我把某种原因,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;
}

哦,所以当我加载我的网站它很好,我可以看到我的页脚,但当我调整窗口,从而执行此代码,它再次隐藏.

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

Answer 1

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

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

简而言之,只要您拥有与上述任何一个匹配的元素,就会重置堆叠上下文,并且z-index仅相对于该容器.

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

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