我的代码如下所示:
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设置为落后于所有东西(其工作),这也将内部条设置为所有内容的后面,无论我为内部条做什么样式。我的布局要求内部栏必须是酒吧的孩子。那么有解决方案吗?它是什么?
为了说清楚我的目标是让栏位于顶部(顶部的内容出现在栏上)并在顶栏后面做顶部(顶部的内容如果与内栏重叠则隐藏,以便内部的链接 - 酒吧很活跃。)
答案 0 :(得分:0)
负z-index值具有奇怪的行为。我不相信它们像你期望的那样在“层”中工作,而是它们都在同一个“层”上。请尝试使用正z-index值:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: 1;
}
.bar {
position: relative;
z-index: 2;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 3;
width: 100%
height: 50px;
}
答案 1 :(得分:0)
首先关闭你发布的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
}
使用绝对值而不是相对值,并使父对象能够定位元素,无论您希望它们如何定位