z-index改变盒子堆叠顺序

古城微笑少年丶 2023-02-18 12:54 21阅读 0赞

在使用**定位**布局时，可能会**出现盒子重叠的情况**。

加了定位的盒子，默认**后来者居上**， 后面的盒子会压住前面的盒子。

应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**  
`z-index` 的特性如下：

1.  **属性值**：**正整数**、**负整数**或 **0**，默认值是 0，数值越大，盒子越靠上；
2.  如果**属性值相同**，则按照书写顺序，**后来居上**；
3.  **数字后面不能加单位**。

**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，其他**标准流**、**浮动**和**静态定位**无效。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sanmao { 
    			/*绝对定位*/
    			position: absolute;
    			width: 200px;
    			height: 200px;
    			margin: 150px;
    			background-color: red;
    		}
    		.damao { 
    			position: absolute;
    			width: 200px;
    			height: 200px;
    			background-color: green;
    		}
    		.ermao { 
    			position: absolute;
    			width: 200px;
    			height: 200px;
    			z-index: 2;
    			margin:100px;
    			background-color: blue;
    		}
    	</style>
    </head>
    <body>
    	<div class="damao"></div>
    	<div class="ermao"></div>
    	<div class="sanmao"></div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617213311724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1,size_16,color_FFFFFF,t_70