一场 position: sticky 无效引发的思考

Published by powerfulyang on Dec 1, 2021

Relate to https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work

一些属性会使 position: sticky 无效

  • You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected
  • 父元素的 display: flex / overflow 属性，等会使其无效

没了 display: flex 还怎么活

使用 float: left 浮动元素
又导致了一个问题 子元素无法把父元素撑开

解决使用 float: left 出现的塌陷

Relate to https://blog.csdn.net/xiaobing_hope/article/details/50296009

在最后一个浮动子元素后面添加一个空的div，并清除其浮动

html
1
2
3
4
5
<div style="float: left" class="div0">
    <div class="div1" style="float: left;"></div>
    <div class="div2" style="float: left;"></div>
    <div style="clear:both;"></div>
</div>

2022-01-06 更新

Relate to https://ishadeed.com/article/position-sticky-css-grid/

align-self: start;

demo: https://codepen.io/shadeed/pen/VwzGpRa
其实之前链接已经有较好的解决方案了 https://stackoverflow.com/a/66966273/12583084, 我却没看到, 并不需要那么多 hack 。