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

 

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

 

　　微信截图_20190118163019.png

 

　　对于红色框，我们将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;

 

　　}







本文转载自中文网