概述
元素的层级（z-index）
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index属性特点:
1、对于没有开启定位的元素不能使用z-index。
2、对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，它的值越大则元素的层级越高，元素越优先显示。如果元素层级一样，则优先选择靠下的元素。(即靠下的代码)
特殊：祖先元素的层级再高也不会盖住后代元素。
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>body{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: chartreuse;
position:absolute;
}
.box2{
width: 100px;
height: 100px;
background-color:aquamarine;
position:absolute;
left: 30px;最后
以上就是自然冬日为你收集整理的CSS基础(20)_元素的层级的全部内容，希望文章能够帮你解决CSS基础(20)_元素的层级所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复