css - 滚动时相对 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/