CSS样式-叠放次序: z-index

作用：用于设定重叠元素的覆盖关系的；

设定方式：设定为一个数值，没有单位；

特点：

1.数值越大，越靠上，可以覆盖数值小的元素；

2.如果没有预先设定z-index，那么缺省是0，后定义的元素在新定义的元素之上（是指在html中的定义）。

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .red {
            background-color: #f00;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .green {
            background-color: #0f0;
            top: 40px;
            left: 40px;
            z-index: 2;
        }

        .blue {
            background-color: #00f;
            top: 80px;
            left: 80px;
        }

    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
</html>
==========运行效果===========
 

 

 

3.设定z-index只对定位设定为relative，absolute，fixed三种元素有效，对标准流，浮动无效。

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            /* position: absolute; */
        }

        .red {
            background-color: #f00;
            float: left;
            /* top: 0;
            left: 0; */
            /* z-index: 1; */
        }

        .green {
            background-color: #0f0;
            width: 150px;
            /* top: 40px;
            left: 40px; */
            z-index: 2;
        }

        .blue {
            background-color: #00f;
            /* top: 80px;
            left: 80px; */
        }

    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
</html>

 

 

posted @ 2021-03-20 21:50  #Friday  阅读(115)  评论(0)    收藏  举报