欢迎来到夜的世界

莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生.料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。
扩大
缩小

z-index

z-index

      z-index的四大特性 : 

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

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

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

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

   示例 : 

<!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.

<!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 .但是由于他们的父类,

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

 

posted on 2018-09-21 17:41  二十四桥_明月夜  阅读(329)  评论(0)    收藏  举报

导航