如何使用CSS z-index属性调整元素的堆叠

堆叠的顺序由数值的大小决定

用数字指定z-index属性值，如果这个数值大的话，在前面，小的话则在后面。

对于红色框，我们将z-index的值设置为10，蓝色框将z-index的值设置为100。

由于蓝色框z-index的值较大，因此它将显示在前面。

如果将蓝色框的z-index值更改为5，因为红色框的值大于了蓝色框，因此红色框在前

微信截图_20190118163300.png

使用z-index属性时必须指定position

此外，z-index属性只能用于具有relative，absolute，fixed的位置而不能用于position:static。

如何使用z-index属性？

基本语法

选择器{

z-index:数值;

}

我们来看具体的示例

HTML

<divclass="z-index_test">

</div>

<divclass="z-index_test2">

</div>

CSS

.z-index_test{

height:200px;

width:200px;

background-color:#FF5722;

position:relative;

z-index:10;

}

.z-index_test2{

height:200px;

width:200px;

background-color:#03A9F4;

position:absolute;

top:70px;

left:100px;

z-index:100; 

}