html – 如何防止固定定位元素与css中的其他元素重叠？

说我有三个div：

<div id="outer"></div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>

#one {
position:fixed;
top:0px;
left:0px;
}

#two {
width: 80%;
height:500px;
}

#three {
width: 80%;
height:500px;
}

由于位置固定,Div“两”和“三”似乎与div“one”重叠.

1)使它们不重叠的最好方法是什么？

2)什么是最好的方法,使得我的固定div占据100％的高度,即使用户滚动下来？ (像侧边栏,防止任何新的div,我想要与第二和第三个div一起运行).最好的方法是涉及#two和#three的浮点数？

解决方法

1：

通过添加margin-left,您可以确保长固定div与其他div不重叠.

#two,#three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2：

添加底部：0px;使它成为窗口的高度,因为它从顶部扩展到底部.

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

注意：我还添加了20％的灵活宽度到#one div,以便与其他两个灵活的宽度div很好地播放.

小提琴：http://jsfiddle.net/ZPRLd/