用户工具

站点工具


position sticky

position sticky 实现的最低要求:

  • 用于定位,必须有 top left right bottom 其中一个属性
  • 要产生 sticky 效果,父元素必须发生滚动,因为 sticky 相对于父元素吸附
  • 父元素本身不用“滚”,但是子元素高度大于等于父元素就没法“滚”(可以观察到,子元素 sticky 后滚动到接触到父元素底部就失去sticky 效果,所以如果一开始子元素就接触底部的话等于无效),例如加入 flex 布局后,子元素默认填满父元素,这就会导致吸附失效,对 stiky 元素添加 align-self: flex-start 恢复原来高度可解

参考:https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46

/opt/bitnami/dokuwiki/data/pages/css/sticky.txt · 最后更改: 2021/01/05 04:23 由 superuser