overflow:auto 和 position:sticky 有冲突如何解决冲突
时间: 2024-05-03 20:16:48 浏览: 208
JS解决position:sticky的兼容性问题的方法
当一个元素设置了 `overflow: auto`,它会创建一个新的块级格式化上下文,这将影响到 `position: sticky` 的表现。
要解决这个冲突,可以将 `position: sticky` 应用在一个父容器上,而不是应用在具有 `overflow: auto` 的子元素上。
例如:
```
<div class="parent">
<div class="child">
...
</div>
</div>
```
```
.parent {
position: sticky;
top: 0;
}
.child {
overflow: auto;
}
```
这样就可以避免 `overflow: auto` 和 `position: sticky` 的冲突了。
阅读全文