相对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）的图像上

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/

Answer 2

我认为你要找的是CSS属性z-index。请参阅此处获取文档：http://reference.sitepoint.com/css/z-index

我把一个小例子放在一起，展示了如何在CSS中使用它： http://jsfiddle.net/B63Km/

基本思想是z-index越高，元素越接近你。

Answer 3

使用更高的z-index作为标题div，即。，city和更低的div用于下面的div（即，相对的一个）

Answer 4

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