CSS基础(20)_元素的层级

元素的层级（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;