设置position:sticky后元素无法固定？添加overflow:scroll后失效原因

原本给标注“I am sticky”的盒子设置position:sticky和top:0时，滚动页面它能固定在视口顶部，但给父容器.container添加overflow:scroll属性后，无论怎么滚动或调整top值，这个元素都无法固定。相关代码如下：

/*This code doesn't provide a responsive design*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Position Property</title>
    <style>
      .container {
        border: 2px solid red;
        height: 200vh;
        overflow: scroll;
      }
      .box {
        background-color: aqua;
        height: 150px;
        width: 150px;
        margin: 30px;
        border: 2px solid black;
        
      }
      .container {
        display: flex;
      }
      #box1 {
        position: static;
        font-weight: 500;
        font-size: 25px;
        text-align: center;
      }
      #box2 {
        position: relative;
        top: 210px;
        font-weight: 500;
        text-align: center;
        font-size: 25px;
    }
    #box3 {
        position: fixed;
        bottom: 20px;
        height: auto;
        width: 500px;
        border: 2px solid black;
        border-radius: 25px;
        background-color: grey;
        box-shadow: inset 0px 0px 5px black;
        font-size: 25px;
        text-align: center;
        z-index: 1;
      }
      #box4 {
        height: auto;
        width: 280px;
        padding: 40px;
        border-radius: 90px;
        position: absolute;
        top: 180px;
        left: 430px;
        text-align: center;
      }

      #box5 {
  
          position: sticky;
          top: 0;
          font-weight: 500;
          text-align: center;
          font-size: 25px;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="box1" class="box">I am static</div>
      <div id="box2" class="box">I am relative</div>
      <div id="box3" class="box">I am fixed here</div>
      <div id="box4" class="box">
        <h1>I am absolute</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur,
          ad laboriosam! Natus rerum, modi laboriosam maiores architecto
          repudiandae esse ipsam nam expedita eveniet. Rem minima minus cumque
          porro, consectetur dicta?Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Fuga officia repellat recusandae aperiam quod facere
          est tenetur corrupti impedit repudiandae at, placeat, quas
          dignissimos, perferendis assumenda laudantium commodi nostrum? Ex?
        </p>
      </div>
      <div id="box5" class="box">I am sticky </div>
    </div>
  </body>
</html>

原因分析 #

1. sticky的滚动上下文机制：position:sticky元素会相对于最近的设置了overflow（值不为visible）的祖先容器生效，而非视口。给.container加上overflow:scroll后，这个容器就成了sticky元素的滚动上下文。
2. flex布局方向限制：你的.container默认是横向flex布局，容器高度设为200vh，但子元素横向排列，垂直方向没有超出容器高度的内容，垂直滚动时sticky元素没有触发“粘住”的空间；同时横向也没有超出容器宽度，横向滚动也无法触发粘性效果。

解决方案 #

• 恢复视口滚动上下文：直接移除父容器.container的overflow:scroll属性，sticky元素会回到以视口为基准的粘性定位，滚动页面时就能固定在视口顶部。
• 调整父容器布局：如果必须保留overflow:scroll，可以给.container添加flex-direction:column改为垂直布局，确保容器垂直方向有足够滚动空间，此时sticky元素会相对于父容器顶部粘住。

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