<div class="parent">
<div class="child-one">我是固定位置的子元素</div>
<div class="child-tow">我是滚动的子元素</div>
</div>
.parent {
height: 200px; /* 父元素需要设定一个高度 */
overflow: auto; /* 父元素内容溢出时显示滚动条 */
position: relative; /* 设定定位上下文 */
}
.child-one {
position: sticky;
top: 0; /* 距离父元素顶部的距离 */
background-color: blue; /* 设定背景色以便于观察固定效果 */
padding: 10px;
font-size: 16px;
z-index: 999; /* 这个要加,不然下面child-two滚动时会在chlid-one上面 */
}
因篇幅问题不能全部显示,请点此查看更多更全内容