Question

这将很难解释，因此我将简单地展示我的jsFiddle尝试。我希望橙色容器位于页面上所有内容的后面。然后，我希望横幅位于橙色容器的顶部，但是在两个白色div容器后面。

您可以查看我的尝试here

感谢您的帮助！

埃文

Answer 1

不完全确定你的意思。顺序和内在的东西，产生巨大的差异所以只显示我们两个div有用。但这是你的意思吗？

<div class'mainContainer'>
     <div class=orange'></div>
     <div class='banner'></div>
     <div class='div1'></div>
     <div class='div2'></div>
</div>

使用该订单，您不需要z-index。在html中，元素位于其父母和之前的兄弟姐妹之上。当我们想要改变它时，我们使用z-index。

如果您的结构不同请发布。

回复您的第一条评论同样的原则适用。后者的元素位于之前的元素之上。所以对于他们来说自下而上：橙色，横幅和两个div。然后只需按顺序添加它们。另外，我没有在z-index之前用负值指出不允许用户与元素交互。即他们将无法在任何具有负z-index的内容中选择或点击任何内容一般来说，关于html / css的信息你应该检查w3cschools。下面是关于z-index的链接 http://www.youtube.com/watch?v=C_CDLBTJD4M&feature=player_embedded为了让z-index工作而发布的另一个人需要position:absolute, position:relative, or position:fixed;

Answer 2

你实际上根本不需要z-indices来做到这一点。你的问题来自你的白色div是静态定位的事实。

我删除了z-index个样式，并将position:relative添加到白色div：

http://jsfiddle.net/Wq8YG/4/

这是你想要实现的目标吗？

在单个页面上使用多个z-index

2 个答案: