Html 应用位置：粘贴到div的子对象

位置：当我将sticky应用于一个div的孩子时，它似乎对我不起作用。如何解决

HTML:

---

示例：

粘滞位置仅在父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/>

Lorem Ipsum
试验
洛勒姆。。。
洛勒姆。。。
洛勒姆。。。
洛勒姆。。。
它在这里也会起作用

在这里不起作用，因为它在div sticky类的父类之外

---

将所有内容放入您的

容器中，此父div是必需的


.div粘性类{
颜色：红色；
位置：粘性；
职位：-网络工具包粘性；
排名：0；
}

乱数假文
试验
乱数假文



























































































































































































实际上它正在工作。但是带有class
div sticky class
的div在另一个移动的div中（带有class
此父div是必需的
）。如果你想让它工作的话，你可以给外层div同样的等级

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

Lorem Ipsum
试验
乱数假文
您的粘滞元素正在按预期工作，您看不到它，因为您的容器div与粘滞元素本身一样短，因此一旦粘滞，父容器就已经从视图中滚动出去了

如果在父div中添加
br
标记，则可以看到它粘在一起。一旦您滚动过父对象，它将与父对象一起滚动，并且不再像您从原始小提琴中看到的那样可见。本页上的示例

如果您正试图为整个页面停靠该元素，那么您只需要将sticky元素放在更高级别的div下，例如包含所有页面内容的div。请记住，当它粘在一起时，它只粘在父容器中


HTML


试验

















br/>





















在这里的示例中，我将粘滞元素移出，使其粘附在整个视口中
您可以共享更多CSS吗；例如父级
div
CSS<代码>溢出：父元素中的“自动”

可防止“粘性”在Safari中运行。我假设Safari是一个基于您使用

-webkit sticky

的问题，您将需要javascript来实现这一点，或者以某种方式摆脱父项。firefox理解显示：内容，但有什么意义

display:inline

也可以@Bob Here add

br

s在父项内部，您的父项太短，无法粘住，相对于父项而言，它是粘滞的div@GCyrillus，这是两个很棒的解决方案，但它们在Safari上不起作用……那么，请注意javascript来处理它。这是目前最可靠的方法：）请添加一些解释，说明为什么在lorem ipsum文本不在div类“此父div是必需的”之前它不起作用！如果元素位于sticky的父div内，则sticky将起作用element@Moisésñañez仍然没有解释为什么它不工作，如果您将

div sticky class

元素放在任何可以工作的地方。它与父对象无关，父对象唯一需要的是足够的高度（由内容定义或填充），因此当它粘住时，可能是seen@Huangismsticky position只适用于兄弟姐妹元素我不能将其应用于父div。@Bob看我评论中的小提琴不确定你的情况，但看到所有这些

s@GustvandeWal没有，真的，它只是Emmet，代码完成工具包：-大多数文本编辑器都有它。FWIW，我用的是崇高的文字。

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

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

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