前端之家收集整理的这篇文章主要介绍了
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/
原文链接:https://www.f2er.com/html/231004.html