阅读量:0
使用css属性zindex调整层级、利用position:sticky固定位置、通过javascript动态控制显示和隐藏。
| 方法 | 描述 | 代码示例 | 优缺点 |
| JavaScript动态调整定位 | 使用JavaScript监听页面滚动事件，当页面滚动到底部时，将fixed定位改为relative定位。 | window.onscroll = function() { if ((getScrollHeight() getScrollTop() getWindowHeight()) > 61) { $('.footer').css('position', 'fixed'); } else { $('.footer').css('position', 'relative'); } } | 优点：灵活性高，缺点：增加了脚本的复杂性。 |
| 给body增加paddingbottom | 在body标签上增加一个paddingbottom属性，使内容与底部保持一定距离。 | body { paddingbottom: 60px; } | 优点：实现简单，缺点：可能会影响其他不需要悬浮footer的页面。 |
| 增加同级占位符div | 在悬浮层外包裹一层div，并增加一个与悬浮层同级的占位符div，高度与悬浮层相同，但不包含任何内容。 | | 优点：不影响其他页面，缺点：增加了无实质内容的空标签，不符合语义化。 |
FAQs
1、问：为什么使用position:fixed会导致悬浮层遮挡内容？
答：使用position:fixed会使元素脱离正常文档流，固定在浏览器窗口的特定位置，当页面滚动到底部时，fixed定位的元素会覆盖在内容上方，导致部分内容被遮挡。
2、问：如何在不改变现有HTML结构的情况下，解决悬浮层遮挡内容的问题？
答：可以使用JavaScript动态调整定位的方法，通过监听页面滚动事件，当页面滚动到底部时，将fixed定位改为relative定位，这样可以避免悬浮层遮挡内容。
的3种方法
方法一：使用绝对定位
1、原理：通过将header和footer设置为绝对定位，并设置zindex层，可以保证header和footer始终在内容层之上，从而避免遮挡。
2、代码示例：
```css
header, footer {
position: absolute;
top: 0;
width: 100%;
zindex: 10; /* 确保zindex高于内容层 */
}
```
方法二：使用固定定位
1、原理：固定定位（fixed）会使元素相对于视口进行定位，不会随着页面滚动而移动，从而保证header和footer始终可见。
2、代码示例：
```css
header, footer {
position: fixed;
top: 0;
width: 100%;
zindex: 10; /* 确保zindex高于内容层 */
}
```
方法三：使用视口单位
1、原理：使用视口单位（如vw、vh）来设置header和footer的高度，可以保证在不同设备上header和footer的高度一致，避免内容被遮挡。
2、代码示例：
```css
header, footer {
position: fixed;
top: 0;
width: 100%;
height: 10vh; /* 使用视口高度 */
zindex: 10; /* 确保zindex高于内容层 */
}
```
三种方法可以有效解决移动端悬浮层遮挡内容的问题，具体选择哪种方法可以根据实际需求和使用场景来决定。
