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

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

概述说我有三个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 {widt


说我有三个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 – 如何防止固定定位元素与css中的其他元素重叠?全部内容,希望文章能够帮你解决html – 如何防止固定定位元素与css中的其他元素重叠?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1101612.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存