CSS position:sticky属性在演示代码中不生效问题咨询

• 粘滞范围被父元素高度限制：sticky元素的粘滞生效区间被严格限制在其直接父元素的高度范围内，同时所有上级祖先元素的高度也会限制生效范围。你代码中sticky元素的直接父元素设置了height: 300px，外层嵌套的多层div没有手动设置高度，默认由内容撑开为300px，所以sticky元素最多只能在页面滚动的前300px范围内有粘滞效果，当父容器完全滚出视口后，sticky元素会跟着父容器一起消失，无法持续粘在视口上。
• 属性声明顺序不规范：你将-webkit-前缀的兼容属性写在了标准属性之后，在webkit内核浏览器中会覆盖标准属性声明，虽然多数场景下不会出错，但规范写法应将兼容前缀属性放在标准属性之前，避免异常。

如果需要sticky元素持续粘滞到页面底部，可选择任意一种调整方式：

1. 给sticky元素的所有外层祖先div设置height: 100%，让父容器高度和body保持一致，调整后代码如下：

<!DOCTYPE html>
<html>
  <head> </head>

  <body style='height: 2000px;'>
    <div style="height:100%">
      <div style="height:100%">
        <div style="height:100%">
          <div style="height: 100%">
            <div
              style="
                position: -webkit-sticky;
                position: sticky;
                top: 87px;
                height: 40px;
                background: blue;
                margin-top: 10px;
              "
            ></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2. 直接删除无用的外层嵌套div，减少父层级限制。

• sticky元素的所有祖先元素不能设置overflow: hidden、overflow: scroll或overflow: auto，否则会直接导致sticky失效，因为滚动上下文会被转移到设置了overflow的祖先元素上，而非视口。
• 必须明确设置top/right/bottom/left中的至少一个属性，否则sticky不会生效，你代码中已经设置了top，这部分是正确的。

内容的提问来源于stack exchange，提问作者user13948420