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

前端之家收集整理的这篇文章主要介绍了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/

猜你在找的HTML相关文章