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>