应用位置：粘在 div 的子元素上

Question

Position: sticky 当我将它应用到 div 的孩子时，它似乎对我不起作用。怎么解决？

HTML:

 Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
</div>
Lorem Ipsum

CSS：

 .div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

示例： https ://jsfiddle.net/n8Le2tva/

原文由 Bob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的粘性元素按预期工作，您看不到它，因为您的容器 div 与粘性元素本身一样短，所以一旦它粘住，父容器就已经滚出了视图。

如果您在父 div 中添加 br 标签，那么您可以看到它会粘住。一旦您滚动过父级，它将与父级一起滚动并且不再可见，正如您从原始小提琴中看到的那样。此页面上的示例 https://developer.mozilla.org/en/docs/Web/CSS/position

如果你想为整个页面停靠它，那么你只需要将粘性元素放在更高级别的 div 下，例如包含所有页面内容的 div。请记住，当它粘住时，它只会粘在父容器内

https://jsfiddle.net/n8Le2tva/3/

HTML

 <div class="this-parent-div-is-necessary">
  <div class="div-sticky-class">
      Test
  </div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/>
</div>

这个例子在这里 https://jsfiddle.net/n8Le2tva/10/ 我将粘性元素移出，以便它粘在整个视口上

原文由 Huangism 发布，翻译遵循 CC BY-SA 3.0 许可协议