使元素在一切之上
我有个问题。 我希望我的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; }
好吧，当我加载我的网站时，它很好，我可以看到我的页脚，但当我调整窗口，从而执行此代码时，它再次被隐藏。
$(".galleria-container").css("width", $(window).width()); $(".galleria-container").css("height", $(window).height());
z-indicies相对于在相同堆叠上下文中具有z-index的其他元素。 堆叠上下文定义为：
- 文档根目录
- 具有位置的元素：绝对或位置：相对和z指数
- 部分透明的元素，即它们的不透明度<1
- 在IE7中，任何具有position：absolute或position：relative的元素（这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器）
简而言之，只要您拥有与上述任何一个匹配的元素，就会重置堆叠上下文，并且z-index仅相对于该容器。
您的问题的简单答案是两件事之一：
- 提高z-index甚至更高（一些插件使用荒谬的z-index数字）
- 在堆叠上下文方面确保您的页脚位于插件上方。 您可能需要转到父节点以设置更高的z-indicies或将您的页脚拉出父节点。
可以尝试使用！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; }
确实是老主题和旧的非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方法会很好。
该插件可能会在您的页脚后附加到正文。 我会看看是否有一个选项可以在页脚之前插入它（以使其在IE <8上看起来正确）并确保页脚具有更高的z-index，并且页脚的父级不使用静态定位。