
巧妙实现子元素在父元素可视区域顶部固定(无需sticky属性)
本文介绍一种无需sticky属性,即可将子元素固定在父元素可视区域顶部的方案。
-
创建嵌套结构: 在外层容器之外再添加一个父级元素。
-
外层容器设置: 将外层父元素设置为相对定位(
position: relative),并启用y轴滚动(overflow-y: auto)。 -
子元素定位: 将需要固定的子元素设置为绝对定位(
position: absolute),并设置其顶部距离为0(top: 0)。 -
尺寸设定: 为子元素设置合适的高度和宽度。
通过以上步骤,即使父元素内容滚动,子元素也会始终保持在父元素可视区域的顶部。










