吸顶div不覆盖顶部div
时间: 2024-05-14 10:12:08 浏览: 97
原生js实现吸顶效果
可以通过设置吸顶div的z-index属性,使其比顶部div的层级低,从而避免覆盖。例如:
```css
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #ccc;
z-index: 100;
}
#sticky {
position: sticky;
top: 50px;
height: 30px;
background-color: #f00;
z-index: 50;
}
```
在以上示例中,顶部div的z-index为100,吸顶div的z-index为50,因此吸顶div不会覆盖顶部div。注意,设置z-index属性只有在元素的position属性为fixed、absolute或relative时才有效。
阅读全文