Question

下面是代码段，如果运行它，您可以看到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，那么粘滞便开始正常工作了。任何帮助将不胜感激。

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

另一个相关的答案，您可以在其中找到有关粘性如何工作的更多示例：https://stackoverflow.com/a/54610362/8620333

Answer 2

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

如果您需要保持容器的绝对位置，但又不想/不想定义容器的高度，则可以使用position:fixed代替position:sticky作为标题ID，并添加{ {1}}，使其显示在容器上方：

z-index:1

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

如果后面跟随位置绝对元素，为什么位置保持不起作用？

3 个答案: