滚动时相对定位的 div 会覆盖固定定位的 div

Question

我在页面顶部有一个固定定位的 div（例如 Facebook），和一个相对定位的 div。当我向下滚动时，相对定位的 div 就会覆盖固定定位的 div。我希望它能够在固定定位的 div 下方。有什么方法可以处理这个问题吗？

#navcontainer
{
    position:fixed;
}

.city
{
    position:relative;
    float:left; 
}

.city .text 
{
    position:absolute;
    top:100px; 
    left:15px;
}

在这个CSS中，我有一个城市div和绝对定位的文本位于相对div(.city)中的图像上。

- Mtok

Answer 1

你好，我认为你应该这样做：

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

<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>
​

实时演示 http://jsfiddle.net/xLnKN/1/

- Rohit Azad Malik

Answer 2

我认为您要找的是CSS属性z-index。文档可以在此处查看：http://reference.sitepoint.com/css/z-index 我制作了一个小例子，展示如何将其与您的CSS一起使用：http://jsfiddle.net/B63Km/ 基本思想是z-index越高，元素就越靠近你。

- Rusty Fausak

Answer 3

如何避免使用z-index？z-index通常被认为是一种反模式，很容易导致其他元素也需要使用z-index。

- feztheforeigner

Answer 4

将头部div的z-index设置为较高值，例如城市名称，将下方div（即相对定位的div）的z-index设置为较低值。

- The Godfather