CSS|14 z-index

最新推荐文章于 2026-01-10 09:51:28 发布

原创最新推荐文章于 2026-01-10 09:51:28 发布 · 1.1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端专栏收录该内容

27 篇文章

订阅专栏

z-index

z-index表示谁压盖着谁，数值大的会压盖住数值小的。
只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素，才会拥有z-index
z-index的值是没有单位的，值是一个正整数，默认的z-index值是0
如果多个定位元素没有设置z-index属性，或者z-index设置一样，那么卸载HTML后面的定位元素就会压盖住前面的定位元素

案例一：z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
        }
        /*.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。
        我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1
        */

        .div1{
            background-color: #f00;
            /*绝对定位*/
            position: absolute;
            left: 100px;
            top: 100px;

        }
        .div2{
            background-color: #00f;
            /*绝对定位*/
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。
我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1
在这里插入图片描述

案例二：设置z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置z-index</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
        }
        /*不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0
        设置z-index后，数值大的显示在上面，所以是div1遮住div2
        */
        .div1{
            background-color: #f00;
            /*绝对定位*/
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 2;
        }
        .div2{
            background-color: #00f;
            /*绝对定位*/
            position: absolute;
            left: 200px;
            top: 200px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0
设置z-index后，数值大的显示在上面，所以是div1遮住div2
在这里插入图片描述

案例三：z-index属性在工作中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index属性在工作中使用</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            height: 60px;
            background-color: #222222;
            /*使用固定定位*/
            position: fixed;
            left: 0px;
            top: 0px;
            /*设置z-index*/
            /*不设置z-index的话，下面的p标签的内容会遮挡住导航栏*/
            z-index: 99999999;
        }
        .nav .inner_c{
            width: 1000px;
            height: 60px;
            margin: 0px auto;
            background-color: #f00;
        }
        ul{
            /*清除无序列表前面的项目符号*/
            list-style: none;
        }
        ul li{
            /*左浮动*/
            float: left;
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        ul li a{
            display: block;
            width: 100px;
            height: 60px;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        ul li a:hover{
            background-color: gold;
        }
        body{
            padding-top: 60px;
        }
        p{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #f00;
            /*相对定位*/
            position: relative;
        }

    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>
                <li><a href="#">网站栏目</a></li>

            </ul>
        </div>
    </div>
    <img src="../img/jyff.JPG" alt="">
    <img src="../img/jyff.JPG" alt="">
    <img src="../img/jyff.JPG" alt="">
    <p>看看我在哪里</p>
    <img src="../img/jyff.JPG" alt="">
    <img src="../img/jyff.JPG" alt="">
</body>
</html>