搜索
您的当前位置:首页正文

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

来源:星星旅游

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Top