z-index

时间 2019-11-17

标签 index 繁體版

原文原文链接

z-index

z-index的四大特性 : html

　　　　1. z-index 值表示谁压着谁---数值大的压盖数值小的.ide

　　　　2.只有定了位的元素,才有z-index ,也就是说 ,无论相对定位,绝对定位,固定定位,均可以使用z-index ,而浮动元素不能使用z-index.spa

　　　　3.z-index 值没有单位,就是一个正整数,默认的z-index 值为 0 ,若是你们都没有z-index或者z-index值都同样,那么谁写在 HTML 后面,谁在上面压着.定位了元素,永远压住没有定位的元素.code

　　　　4.从父现象:父亲怂了,儿子在厉害也没用.htm

示例 : blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            width: 0;
            height: 0;
        }
        .top1{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
        .top1 .top1-1{
            width: 50px;
            height: 50px;
            background-color: #333;
            position: absolute;
            top: 70px;
            left: 150px;
        }
        .top2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        .top2 .top2-2{
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 150px;
        }
    </style>
</head>
<body>
    <div class="top1">
        <div class="top1-1"></div>
    </div>
    <div class="top2">
        <div class="top2-2"></div>
    </div>
</body>
</html>

View Code

由于top2的权重高于top1的权重,因此top2-2会覆盖top1-1.it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            width: 0;
            height: 0;
        }
        .top1{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            z-index: 5;
        }
        .top1 .top1-1{
            width: 50px;
            height: 50px;
            background-color: #333;
            position: absolute;
            top: 70px;
            left: 150px;
            z-index: 100;
        }
        .top2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            z-index: 4;
        }
        .top2 .top2-2{
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            left: 150px;
            z-index: 200;
        }
    </style>
</head>
<body>
    <div class="top1">
        <div class="top1-1"></div>
    </div>
    <div class="top2">
        <div class="top2-2"></div>
    </div>
</body>
</html>

从父现象

虽然top2-2的z-index 大于top1-1 的z-index .可是因为他们的父类,io

top2 的z-index 小于 top1 的z-index .因此会造成top1-1 覆盖 top2-2. 这就是父类怂了儿子在牛逼也没用.event