当我将 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;
}
br 标签，则可以看到它固定。一旦您滚过父容器，它将随父容器一起滚动，并且不再可见，正如您在原始 fiddle 上所看到的。在此页面上有一个示例：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/中，我把粘性元素移出来，以便它固定在整个视口上。
<br>标签时都忍不住皱眉，即使是在演示中也是如此。你可以使用<p>lorem1000</p>+TAB代替。测试完成后再删除段落。只是说一下。 - Ricardo Zeathis-parent-div-is-necessary 容器中。
.div-sticky-class {
color: red;
position: sticky;
position: -webkit-sticky;
top: 0;
}<div class="this-parent-div-is-necessary">
Lorem Ipsum
<div class="div-sticky-class">
Test
</div>
Lorem Ipsum
<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/><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>固定定位只在父级div内起作用，你的html应该像这样：
Lorem Ipsum
<div class="this-parent-div-is-necessary">
<div class="div-sticky-class">
Test
</div>
<div>Lorem ...</div>
<div>Lorem ...</div>
<div>Lorem ...</div>
<div>Lorem ...</div>
<div>
<p>It will works here too</p>
</div>
</div>
Won't work here because it's outside the parent of div-sticky-class
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
div-sticky-class 元素，它都会起作用。这与父元素无关，唯一需要父元素具备足够的高度（定义或由内容填充），以便粘附时可以看到它。 - Huangism<header>
<img src="/logo.svg" alt="Logo"/>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact</a></li>
</ul>
</header>
这里是你可以使用的潜在 CSS。
header {
position: sticky;
top: -100px;
}
这样，您的页眉底部就是固定显示的部分！
如果您的图像没有固定大小，则必须通过JS计算顶部值。然后，您可以找到ul并将其顶部属性设置为img的负高度。
当然，在桌面视图上，您很可能希望整个页眉元素都是粘性的，包括img，因此在桌面布局宽度上，只需使用css断点将顶部设置为0即可。
它实际上正在工作。但是具有类 div-sticky-class 的div位于另一个移动的div内（具有类 this-parent-div-is-necessary ）。如果您想让它工作，可以给外部div相同的类，例如
Lorem Ipsum
<div class="this-parent-div-is-necessary div-sticky-class">
<div class="div-sticky-class">
Test
</div>
</div>
Lorem Ipsum
div的CSS？在父元素中使用overflow:auto会导致sticky在Safari中无法正常工作。我猜测你使用-webkit-sticky是因为要考虑Safari的兼容性问题。 - Robertdisplay:contentshttps://jsfiddle.net/n8Le2tva/1/，但这有什么意义呢？`display:inline`也可以 https://jsfiddle.net/n8Le2tva/2/。 - G-Cyrillusbr标签添加到父元素内部，因为您的父元素太短了，无法保持粘性，这是相对于父div元素的。 - Huangism