CSS样式层叠顺序
文章目录
- CSS样式重叠
- 一 什么是CSS样式的层叠顺序
- 二 影响层叠顺序的一些常用CSS属性
- 三 CSS样式的层叠顺序
- 四 事例
- 1.普通关系
- 2.父子关系
CSS样式重叠
CSS样式重叠方法是一种常用的前端开发技巧，它可以帮助我们在页面中实现元素的覆盖，从而达到更好的页面效果。
一 什么是CSS样式的层叠顺序
在CSS中，每个元素都有一个层叠上下文，它决定了元素在页面中的显示顺序。当多个元素发生重叠时，层叠上下文的顺序决定了哪个元素会显示在上面，哪个会显示在下面。
二 影响层叠顺序的一些常用CSS属性
z-index：z-index属性用于控制元素的层叠顺序。数值越大，则元素越靠前显示。当两个元素重叠时，z-index值大的元素会显示在前面。需要注意的是，z-index只对定位元素（position属性，且属性值为非static值的元素）有效。position：position属性也会影响元素的层叠顺序。通常来说，定位元素会显示在普通元素的前面。因此，为了控制元素的层叠顺序，我们可以给元素添加定位属性。
三 CSS样式的层叠顺序
从高到低依次是：
- z-index属性值为正数的元素
- position属性值为fixed的元素
- position属性值为sticky的元素
- position属性值为absolute的元素
- position属性值为relative的元素
- position属性值为static的元素
- z-index属性值为负数的元素
四 事例
1.普通关系
代码：
<style>.d1{width: 100px;height: 100px;background-color: royalblue;position: absolute;top: 0;}.d2{width: 100px;height: 100px;background-color: rosybrown;position: absolute;top: 0;}
style><body><div class="d1">嘿嘿嘿div><div class="d2">哈哈哈div>
body>
如图，当我们给d1、d2定位到同一位置时，d1被d2覆盖了。
解决：
<style>.d1{z-index:1;
}
或
.d2{z-index:-1;
}
style>
如图，给d1设置z-index:1;则d1的层叠顺序比d2高，d1覆盖d2。(给d2设置负值是一样的道理)
2.父子关系
代码：
<style>.father{width:150px;height:150px;background-color: royalblue;}.son{width:100px;height:100px;background-color: rosybrown;}
style><body><div class="father"><div class="son">div>div>
body>
如图，可以看到子元素默认把父元素覆盖了。
解决：
<style>
.father{position: relative;
}.son{position: relative;z-index:-1;
}
style>
如图，给子元素设置z-index为负值，父元素可以覆盖子元素。
注意，单独给父元素设置正值或既给子元素设置负值又给父元素设置正值都是不生效的！！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！