绝对定位和overflow-y: scroll实现不使用fixed固定定位将元素固定在页面顶部或底部

最新推荐文章于 2024-04-25 15:04:32 发布

原创

最新推荐文章于 2024-04-25 15:04:32 发布 · 1.7w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css #绝对定位 #fixed #固定定位

本文探讨了如何使用绝对定位和overflow-y: scroll属性替代fixed定位，以解决在不同设备上可能出现的位置偏差问题。通过设置元素的CSS样式，确保其在页面顶部或底部保持固定，同时保持良好的滚动体验。

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

使用position：fixed固定定位可以很方便将元素固定在页面某处。但是它和绝对顶部不同：绝对定位是相对于其position：absolute的父元素来定位；而fixed定位相对于屏幕；这导致在左右分别布局的页面上出现定位的元素在不同显示器或不同型号手机上出现偏差。使用绝对定位能通过相对父元素来保证定位元素在左边某处或右边某处。