css中的定位叠放次序z-index

向右看齐 2022-10-24 05:52 118阅读 0赞

**我们知道，绝对定位是不占用位置的，那我假如有三个绝对定位的一模一样的盒子，那哪个浮在最上面呢？看看下面代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                /* 绝对定位说明不占用位置，是浮动的 */
                position: fixed;
                /* 都显示在左上角 */
                top: 0;
                left: 0;
            }
            .big {
        
                background-color: black;
            }
            .middle {
        
                background-color: blue;
            }
            .small {
        
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box big"></div>
        <div class="box middle"></div>
        <div class="box small"></div>
    </body>
    </html>

从上面代码，我们能看到，big盒子是黑色，middle盒子是蓝色，small盒子是红色。  
我们看看浏览器显示结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
*所以我们能够总结：定位叠放顺序的其中一个特点：如果属性值相同，则按书写顺序，后面的盒子居上。*  
**如果我要让第一个盒子居上，那应该怎么做呢？**  
这时候我们就要手动给第一个盒子加上

## z-index:1； ##

看下面代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                /* 绝对定位说明不占用位置，是浮动的 */
                position: fixed;
                /* 都显示在左上角 */
                top: 0;
                left: 0;
            }
            .big {
        
                background-color: black;
                z-index: 1;
            }
            .middle {
        
                background-color: blue;
            }
            .small {
        
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box big"></div>
        <div class="box middle"></div>
        <div class="box small"></div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
如果看得还是不是很清楚，那我们给三个盒子不一样位置，就能清楚看到叠放顺序啦，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                /* 绝对定位说明不占用位置，是浮动的 */
                position: fixed;
                /* 都显示在左上角 */
                top: 0;
                left: 0;
            }
            .big {
        
                background-color: black;
                z-index: 1;
            }
            .middle {
        
                background-color: blue;
               margin-left: 150px;
               margin-top: 150px;
                
            }
            .small {
        
                background-color: red;
                margin-left: 100px;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box big"></div>
        <div class="box middle"></div>
        <div class="box small"></div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
*所以我们能够总结：加了z-index，1是大于默认auto的，此时盒子就能居上*  
**第三个问题，如果此时我们想让中间盒子在最上层，第一个盒子在中间层，那应该怎么做呢？**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
        
                width: 200px;
                height: 200px;
                /* 绝对定位说明不占用位置，是浮动的 */
                position: fixed;
                /* 都显示在左上角 */
                top: 0;
                left: 0;
            }
            .big {
        
                background-color: black;
                z-index: 1;
            }
            .middle {
        
                background-color: blue;
               margin-left: 150px;
               margin-top: 150px;
               z-index: 2;
                
            }
            .small {
        
                background-color: red;
                margin-left: 100px;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box big"></div>
        <div class="box middle"></div>
        <div class="box small"></div>
    </body>
    </html>

答案很简单，只要让第二个盒子的z-index大于第一个盒子，第一个盒子的z-index大于第三个盒子就行啦。  
看上面的代码：我只不过在第二个盒子那里加了z-index:2;  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
*因此我们能够总结：z-Index的数值越大，盒子就能越靠上~*

**还有两个特点要记住：  
z-index：数值；数值后面不要加单位  
还有，还有定位的盒子才有z-index属性哟~**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/7f0f7d05516e4daaa4f71e954ebab0f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/96b27959a2bf445c8b5ff24e1fcd41fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/d19232a2137c4e579bdfbd0e25916dc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/4c67b91b9eef4eb280f6d4b36a1f8612.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/af5110e286e941d29826cd8d2b535a32.png