文章内容
2021/1/10 11:20:42,作 者: 黄兵
position sticky理解
最近在使用页面左边菜单滚动效果,使用的是浮动布局,也就是:
display: flex;
但是在滚动的时候,左边菜单还是有一部分被遮住了,截图如下:
产生这样的原因是:顶部也有一个浮动菜单,导致左边菜单被遮挡。
解决方法:
position: sticky;
top: 90px;
这里使用的是sticky的定位方式,关于sticky的定位MDN解释如下:
解释:
top
, right
, bottom
, 和 left
的值进行偏移。偏移值不会影响任何其他元素的位置。overflow
是 hidden
, scroll
, auto
, 或 overlay
时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。这样在顶部滚动的基础上,再设置离顶部90px的距离,这样就可以解决顶部菜单遮挡左边菜单的问题。
再看看效果:
参考资料:
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - position sticky理解
评论列表