position:fixed定位时 “高度坍塌” 问题的解决

最新推荐文章于 2023-08-20 13:59:37 发布

weixin_30315723

最新推荐文章于 2023-08-20 13:59:37 发布

阅读量988

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/morning0529/p/4939430.html

本文介绍了两种解决固定定位元素导致后续模块布局错乱的方法：一是通过设置后续模块的margin-top来避开固定定位元素的空间；二是利用一个空div作为支柱使固定定位元素的父元素获得高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：对于固定定位的元素，固定住高度，后面紧跟的模块会当做前面的固定元素不存在似的，这给布局带来了困扰

解决方法：

1.给第二个模块div设置margin-top的值，margin-top的值设为大于等于固定定位模块的高度

2.这个方法是百度百科手机页面用的，先为固定定位元素设一个父元素，不设高度，不设宽度，什么都不设，他的第一个子元素是我们需要做固定定位的元素，这个按照需求写好样式，此时，父元素的高度依然是0，如何使得父元素有高度呢，父元素有了高度，后面来的模块就不用设置margin-top的值了，我们只要在固定定位元素后面写一个同等高度的空div便解决了，这时父元素就有高度了，而且正是我们需要的高度，这个空的div像一根柱子，支撑起了这个空中楼阁。