position设置sticky布局不生效的可能情况

sticky布局的设置很简单，原理也很好理解，因为在这之前我们也曾经用其他定位方式来模拟过这种

布局效果，例如，顶部菜单的固定，侧边客服控件的固定等。但是，在使用sticky布局时也有一些需要注意的情况，这些情况都可能导致你设置的sticky布局不生效，截止目前，我遇到的几种可能情况如下

1、sticky元素相对定位的父辈元素被设置了overflow相关的属性，如：overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto; 这种情况最常发生了，错误代码如下

代码语言：html复制

<div style="position: relative; overflow: hidden">
    <div style="position: sticky; width: 50px; height: 50px: top: 50px"></div>
</div>

2、忘了给sticky的元素设置定位位置属性，left,top,right.bottom 中的一个或多个

3、设置sticky的子元素，高度超过其设置了定位的父元素

css sticky

0 人点赞