如果后跟位置绝对元素，为什么位置粘性不起作用？

Question

如果后跟位置绝对元素，为什么位置粘性不起作用？

下面是代码片段，如果运行它，您可以看到标题元素没有粘贴。我查看了以下问题。 “位置：粘性；” 不工作的 CSS 和 HTML 和CSS：“位置：粘性” 在许多其他人中定义了“高度”时不起作用，但它没有帮助..

这是我的代码。

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我还注意到，如果我从容器 div 中删除 position: absolute ，粘性开始正常工作。任何帮助将不胜感激。

Answer 1

Tem*_*fif 7

向正文添加边框将显示问题：

<body style="margin: 0;border:2px solid red;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

如您所见，主体的高度由粘性元素定义，因此没有粘性行为。如果您删除，positon:absolute您将使元素成为流动的一部分，因此身体高度会增加并且您有粘性行为

<body style="margin: 0;border:2px solid red;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style=" top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

问题不在于position:absolute元素，而在于粘性元素的包含块（父容器）的高度。这个需要足够大（至少比粘性元素大）才能有粘性行为。

增加身体高度并保持绝对元素也可以解决这个问题：

<body style="margin: 0;border:2px solid red;height:200px;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

另一个相关的答案，您可以在其中找到更多关于粘性如何工作的示例：Why element with position:sticky does not stick to the bottom of parent?

归档时间：	6 年，8 月前
查看次数：	3411 次
最近记录：	5 年，9 月前