文章内容

2021/1/10 11:20:42,作 者: 黄兵

position sticky理解

最近在使用页面左边菜单滚动效果,使用的是浮动布局,也就是:

display: flex;

但是在滚动的时候,左边菜单还是有一部分被遮住了,截图如下:

产生这样的原因是:顶部也有一个浮动菜单,导致左边菜单被遮挡。

解决方法:

position: sticky;
top: 90px;

这里使用的是sticky的定位方式,关于sticky的定位MDN解释如下:

解释:

元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hiddenscrollauto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。

这样在顶部滚动的基础上,再设置离顶部90px的距离,这样就可以解决顶部菜单遮挡左边菜单的问题。

再看看效果:



参考资料:

1、MDN Web Docs - position


黄兵个人博客原创。

转载请注明出处:黄兵个人博客 - position sticky理解

分享到:

发表评论

评论列表