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

【问题标题】：Why position sticky is not working if followed by position absolute element?如果后跟位置绝对元素，为什么位置粘性不起作用？
【发布时间】：2019-07-20 14:00:59
【问题描述】：

下面是代码sn-p，如果运行它，你可以看到header元素没有粘住。我已经查看了以下问题。 “Position: sticky;” not Working CSS and HTML 和CSS: 'position: sticky' not working when 'height' is defined 在许多其他人中，但它没有帮助..

这是我的代码。

<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>

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

【问题讨论】：

标签： css css-position sticky

【解决方案1】：

在正文中添加边框会显示问题：

<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>

如您所见，主体的高度由粘性元素定义，因此有is no sticky behavior。如果您删除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>

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

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

<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>

另一个相关答案，您可以在其中找到有关粘性工作原理的更多示例：Why element with position:sticky doesn't stick to the bottom of parent?

【讨论】：

知道在使用translateY 偏移内联元素的上下文中讨论sticky 的任何问题吗？
我编辑了我的问题。我正在做的是将p 的每个字母包装在span 中，然后translateY 逐渐偏移每个字母（即第一个字母被100% 偏移，第二个字母200%，第三个300%，和依此类推），我希望它们在滚动元素以最终形成整个单词/句子/等时粘在容器的顶部，但不知道该怎么做
@oldboy 我想它值得一个问题 ;) 做一个完整的答案而不是简单的评论会更容易（更多的用户也可以考虑这个问题并给出潜在的解决方案）
好的，发布了一个问题。我尽我所能，尽我所能。 HERE 是问题

【解决方案2】：

如上所述，由于未设置正文高度，因此标题的 position 永远不会从 relative 更改为 fixed（这是 sticky 所做的 - 请参阅 (https://www.w3schools.com/cssref/pr_class_position.asp)。

如果您需要保持容器绝对定位但不能/不想定义主体高度，您可以使用 position:fixed 而不是 position:sticky 作为标题 id，并包含 z-index:1 以便它出现在容器上方：

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: fixed;top: 0px;background-color: rgb(33, 150, 243); z-index:1;">
    <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>

【讨论】：

【解决方案3】：

在这种情况下，如果要将div的高度设置为特定值，可以将body元素设置为min-height:1000px，并将div#header的z-index设置为1。

<body style="margin: 0;min-height: 1000px">
<div id="header"
     style="height: 50px;width: 100%;position: sticky;top: 0;background-color: rgb(33, 150, 243);z-index:1">
    <div>header contents</div>
    <div>header contents</div>
</div>
    <div id="container" style="position: absolute; top: 50px; left: 0; 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>

【讨论】：