position-sticky 为什么会失效？

position-sticky 为什么会失效position:sticky的生效规则明白了生效规则就会知道为什么有的时候设定的sticky会失效须指定 top, right, bottom 或 left 四个阈值其中之一且达到设定的阈值才可使粘性定位生效。否则其行为与相对定位相同并且 top 和 bottom 同时设置时top 生效的优先级高left 和 right 同时设置时left 的优先级高设定为position: sticky的元素的任意父节点的 overflow 属性必须是 visible否则position:sticky不会生效在满足上述情况下设定了position: sticky的元素的父容器的高度必须大于当前元素否则也会失效。当然此时sticky吸附的基准元素就会变成父元素如果 position: sticky 元素的任意父节点定位设置为 position: overflow则父容器无法进行滚动所以 position:sticky 元素也不会有滚动然后固定的情况在满足上述情况下设定了position: sticky的元素的父容器的高度必须大于当前元素否则也会失效。当然此时sticky吸附的基准元素就会变成父元素.flex-container { display: flex; } .sticky-item { position: sticky; top: 0; align-self: flex-start; /* 确保正确触发 */ }.sticky-header { position: sticky; top: 0; z-index: 100; } .sticky-sidebar { position: sticky; top: 20px; z-index: 90; }!DOCTYPE html html head style .parent { height: 200vh; /* 确保父容器高度足够 */ overflow: auto; /* 允许滚动 */ } .sticky-child { position: sticky; top: 10px; /* 必须指定阈值 */ background: yellow; z-index: 10; /* 避免重叠 */ } /* 兼容 Safari */ .sticky-child { position: -webkit-sticky; } /style /head body div classparent div classsticky-child我是粘性元素/div p其他内容.../p /div /body /html