html - 粘性元素未粘在指定位置

Question

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

例如，看下面的 HTML 代码，

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

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

标签： htmlcssgoogle-chromestickyfloating

Answer 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，以便粘性定位起作用。rightbottomleft

如果您想了解更多关于浮动的信息 -所有关于浮动的信息

别的

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