z-index

z-index

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

  • z-index 值表示谁压着谁，数值大的压盖住数值小的，
  • 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  • z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  • 从父现象：父亲怂了，儿子再牛逼也没用

 

z-inde 就是改变两个 正在覆盖的图片的显示，可以让他们的显示的先后顺序进行改变，谁的z-index的值大就显示谁的，子级别的z-index不会改变父级的显示 但是父级会改变子级的

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .lzy{
            width: 300px;
            height: 300px;
            background-color: black;
            position: absolute;
            z-index: 1;
        }
        .tl{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            z-index: 11;/*谁的级别大就显示谁的*/

        }
        /*子级在牛逼也不会带动父级改变*/
        .kimi{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 400px;
            left: 400px;
            z-index:30000;
        }
        .sd{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 450px;
            left: 350px;
            z-index: 1000;
        }


    </style>
</head>
<body>

    <div class="lzy">
        <div class="kimi"></div>
    </div>
    <div class="tl">
        <div class="sd"></div>
    </div>
    
</body>

 

posted @ 2018-05-26 11:14  可爱的红领巾  阅读(208)  评论(0)  编辑  收藏  举报