CSS|14 z-index

z-index

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

案例一:z-index

html 复制代码
<!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

html 复制代码
<!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属性在工作中使用

html 复制代码
<!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>
相关推荐
超级大只老咪7 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒20 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只37 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience41 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹42 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
三月暖阳43 分钟前
分享并记录日常开发中的一些CSS布局和样式技巧(持续更新)
css·scss
JarvanMo43 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse44 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js