我有个问题.我希望我的页脚能够在我页面中的其他所有内容之上.诀窍是我正在使用Galleria插件,它有自己的风格,出于某种原因即使我把z-index：99999;在我的页脚上它仍然不在顶部.
这是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-indicies相对于在相同堆叠上下文中具有z-index的其他元素.堆叠上下文定义为：
>文档根目录
>具有位置的元素：绝对或位置：相对和z-index
>部分透明的元素,即它们具有不透明度< 1
>在IE7中,任何具有position：absolute或position：relative的元素(这可能会导致许多错误,因为它是唯一以这种方式运行的浏览器)
简而言之,只要您拥有与上述任何一个匹配的元素,就会重置堆叠上下文,并且z-index仅相对于该容器.
您问题的简单答案是两件事之一：
>提高z-index甚至更高(一些插件使用荒谬的z-index数字)>在堆叠上下文方面确保您的页脚位于插件上方.您可能需要转到父节点以设置更高的z-indicies或将页脚拉出父节点.
