CSS 滚动时相对 div 越过固定 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10303882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative div is passing over fixed div while scrolling
提问by Mtok
I have a fixed positioned div on the top of the page. (e.g. Facebook) And an relative positioned div in the page. When I scroll down, relative div is passing over fixed div. I want it to pass under fixed div. Is there any idea to handle this ?
我在页面顶部有一个固定定位的 div。（例如 Facebook）和页面中相对定位的 div。当我向下滚动时，相对 div 越过固定 div。我希望它在固定 div 下通过。有没有办法处理这个问题？
#navcontainer
{
position:fixed;
}
.city
{
position:relative;
float:left;
}
.city .text
{
position:absolute;
top:100px;
left:15px;
}
In this css I have a city div and absolute text is sitting on the image which is in relative div (.city)
在这个 css 中，我有一个城市 div，绝对文本位于相对 div (.city) 中的图像上
回答by Rohit Azad
Hi I think you should do this:
您好，我认为您应该这样做：
css
css
#navcontainer
{
position:fixed;
background:red;
left:0;
right:0;
top:0;
height:100px;
z-index:3;
}
.city
{
position:relative;
background:green;
left:0;
right:0;
padding:10px;
top:100px;
z-index:2;
}
.city .text
{
padding:10px;
background:yellow;
}?
HTML
HTML
<div id="navcontainer">This is navigation</div>
<div class="city">
<div class="text">here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br /></div>
</div>
?
Live demo http://jsfiddle.net/xLnKN/1/
回答by Rusty Fausak
I think what you are looking for is the CSS property z-index. See here for documentation: http://reference.sitepoint.com/css/z-index
我认为您正在寻找的是 CSS 属性z-index。有关文档，请参见此处：http: //reference.sitepoint.com/css/z-index
I threw together a small example showing how to use it with your CSS: http://jsfiddle.net/B63Km/
我拼凑了一个小例子，展示了如何在你的 CSS 中使用它：http: //jsfiddle.net/B63Km/
The basic idea is the higher the z-index, the closer the element is to you.
基本思想是 z-index 越高，元素离你越近。
回答by The Godfather
Use a higher z-index for the header div, ie., city and a lower one for the below div (ie., the relative one)
对标题 div 使用较高的 z-index，即城市，对下面的 div（即相对的）使用较低的 z-index
回答by feztheforeigner
How can you avoid using a z-index for this? Z-index is typically considered an anti-pattern and can easily snowball into requiring other elements to also require z-index.
您如何避免为此使用 z-index？Z-index 通常被认为是一种反模式，并且很容易滚雪球，要求其他元素也需要 z-index。
