css 将（z-index）元素定位在元素后面
我正在尝试制作以下 html/css 布局：
http://siteique.com/uploads/1 .png http://siteique.com/uploads/1.png 。
我的问题是主 div 后面的蓝线。
<div id="container">
<!-- blue line 1 -->
<div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"></div>
<div id="site">
</div>
<div id="footer">
<!-- blue line 2 -->
<div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"></div>
</div>
</div>
问题是，如果我将 #site div position:absolute 和 z-index:2 设为 < code>#footer 不会位于我想要的位置。
那么我需要什么技巧呢？
我试图将蓝色 div 放置在白色 div #site 后面
I'm trying to make the following html/css layout:
http://siteique.com/uploads/1.png http://siteique.com/uploads/1.png .
My problem is with the blue lines behind the main div.
<div id="container">
<!-- blue line 1 -->
<div style="width:100%; height:60px; background-color:#81b7ff; position:absolute; top:385px; z-index:1; float:left;"></div>
<div id="site">
</div>
<div id="footer">
<!-- blue line 2 -->
<div style="position:relative; bottom:0px; height:200px; width:100%; z-index:1;"></div>
</div>
</div>
The problem is that if I make the #site div position:absolute and z-index:2 the #footer won`t be in the position I want.
So what is the trick I need?
I'm trying to position the blue div's behind the white div #site
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您只是想通过添加新层来影响堆叠上下文，
position:relative;会比较合适，并保持元素流动。另请注意，“蓝线 2”与“蓝线 1”具有不同的堆叠上下文，因为前者比后者再嵌套一层 (#footer)。
另请参阅：
If you just want to influence the stacking-context by adding a new layer,
position: relative;would be appropriate and keeps the element flowing.Please note also, that the »blue line 2« has a different stacking context then »blue line 1«, because the former is nested inside one more layer (#footer) then the latter.
See also: