我的代码是这样的:
css:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: -100;
}
.bar {
position: relative;
z-index: -200;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 100;
width: 100%
height: 50px;
}
html:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
<div>
</body>
如您所见，我试图让内部栏出现在前面，但这不起作用。一旦我将 bar 设置为在所有内容的后面(有效)，这也会将 inner-bar 设置为在所有内容的后面，无论我为 inner-bar 做了什么样式。我的布局要求 inner-bar 必须是 bar 的子项。那么有什么解决办法吗？
为了明确起见，我的目标是使栏位于顶部之后(顶部的内容出现在栏上)并使顶部位于内部栏之后(如果顶部的内容与内部栏重叠，则顶部的内容将被隐藏，以便内部的链接-栏处于事件状态)。
最佳答案
首先，您发布的 html 中存在错误:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
</div>
</body>
你没有关闭最后一个 div :)
至于其余的:
你好，先生! http://jsfiddle.net/8AJnD/31/
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
top:0;left:0;z-index:0;
}
.bar {
position: absolute;z-index:-1;
width: 100%;
height: 100px;top:0;left:0
}
.inner-bar {
position: absolute;
z-index:-2;
width: 100%
height: 50px;top:0;left:0
}
使用绝对而不是相对，并使父级成为相对的，以便能够按照您希望的方式定位元素
关于html - 使用 z-index 使一个嵌套元素位于其他元素之前？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5144055/