css3 sticky不生效的原因？

问题描述

布局时设置了 position: sticky ；发现没有生效，于是找了一下问题的原因；

解决方案

sticky不生效原因有：

• 父元素设置了overflow:hidden或者overflow:auto
• 未指定top、right、bottom、left4个值中的任意一个
• 父元素高度小于sticky定位的元素高度

所以：

• sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

方案：

• 可以使用 overflow：clip； 来解决，但是兼容性不好，ios 16 以下不支持。