粘性元素未粘贴在指定位置[重复]答案

【问题标题】：Sticky element is not sticking at the specified position [duplicate]粘性元素未粘贴在指定位置[重复]
【发布时间】：2020-11-17 15:58:03
【问题描述】：

我刚刚发现如果后续元素是浮动元素，粘性元素将无法按预期工作。

例如，看下面的 HTML 代码，

tto

废话

在这种情况下，粘性元素将与第一个后续非浮动元素的底部一起滚动。如果有人遇到过同样的情况或知道解决方案，请告诉我。

【问题讨论】：

这能回答你的问题吗？ How does the "position: sticky;" property work?

标签： html css google-chrome sticky floating

【解决方案1】：

如果你想使用浮点数 -

<div style="position:sticky;top:0">
tto
</div>
<div style="float:left; padding-bottom: 3000px">
blah
</div>
<div style="clear:both;"></div> //extra div needed

您还必须至少指定top、right、bottom 或left 之一才能使粘性定位起作用。

如果您想了解更多关于浮动的信息 - All about floats

否则

尝试使用 FlexBox 代替浮动，因为 FlexBox 为您提供浮动的布局优势，而没有奇怪的怪癖和技巧。

【讨论】：

这个小代码正在运行。但是我原来的网站有点大。我无法解决那里的问题。 fulgid-distortions.000webhostapp.com 看这个，开头有一个菜单。这是一个带有 top: 0 的粘性元素；仍然没有保持在顶部..我尝试清楚：两个到它附近的每个 div 标签..仍然问题没有解决。
在 id="underconstruction" 的 div 之后添加
。这应该使 div 具有粘性

【解决方案2】：

你好，

<div class="container">
<div class="sticky">
tto
</div>
<div style="float:left; padding-bottom: 3000px">
blah
</div>
</div>

.container{
  display: flex;
  flex-direction: column;
}

.sticky{
  position: sticky;
  top: 0;
}

这以某种方式起作用。显然添加一个容器会有所帮助。你能告诉我这是否有效吗？

【讨论】：

您好，欢迎来到 SO。请编辑您的 anwser 以符合 SO 准则。 SO 是关于教授和解释解决方案，以便它可以重现。提供一个代码片段而没有任何解释你做了什么，你为什么这样做以及它是如何工作的，对于 SO 来说是不够的。