CSS 相对父级固定，且不随滚动条滚动

hibiscusxin

已于 2024-06-24 14:52:24 修改

阅读量442

点赞数 7

分类专栏： CSS 文章标签： css 前端

于 2024-06-24 14:03:22 首次发布

本文链接：https://blog.csdn.net/qq_41838435/article/details/139924339

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS 相对父级固定，且不随滚动条滚动

<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上面 */
}