范仁义css3课程---28、元素的层级
一、总结
一句话总结：
如果设置了定位的话，正常默认是下边的元素会盖住上边的，如果想改变定位元素的堆叠顺序，可以给元素设置z-index属性。z-index的值可以设置为整数，数越大层级越高。
1、元素层级的特点有哪些？
1、如果定位元素的层级是一样，则下边的元素会盖住上边的
2、层级高的会盖住层级低的
3、父元素的层级再高，也不会盖住子元素
2、元素设置层级的代码小实例？
直接在定位元素的样式里面通过z-index给元素设置层级
1 .box2{ 2 background-color: red; 3 position: absolute; 4 left: 100px; 5 top: 100px; 6 z-index: 2; 7 }
二、元素的层级（z-index）
博客对应课程的视频位置：28、元素的层级
https://www.fanrenyi.com/video/10/68
1、z-index
如果设置了定位的话，正常默认是下边的元素会盖住上边的，如果想改变定位元素的堆叠顺序，可以给元素设置z-index属性。z-index的值可以设置为整数，数越大层级越高。
2、元素的层级特点
1、如果定位元素的层级是一样，则下边的元素会盖住上边的
2、层级高的会盖住层级低的
3、父元素的层级再高，也不会盖住子元素
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
父元素的层级再高，也不会盖住子元素
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>元素的层级</title> 6 <style> 7 .box{ 8 width: 200px; 9 height: 200px; 10 } 11 .box1{ 12 background-color: #605ca8; 13 position: relative; 14 } 15 .box2{ 16 background-color: red; 17 position: absolute; 18 z-index: -1; 19 top: 100px; 20 left: 150px; 21 } 22 .box3{ 23 background-color: #bfa; 24 position: relative; 25 z-index: 2; 26 } 27 .box_parent{ 28 width: 300px; 29 position: relative; 30 background-color: lightgray; 31 z-index: 100; 32 } 33 </style> 34 </head> 35 <body> 36 <!-- 37 z-index可以给定位元素设置元素的层级 38 z-index的默认值是auto 39 40 就是如果元素没有设置定位的话，z-index是没有作用的（在基础的css中这样的） 41 完全了解：有一些css3一些属性也是支持z-index 42 43 1、就是默认没有设置z-index的话（或者设置的z-index是一样的），那么就是后面元素就在上面 44 2、如果给定位元素设置了z-index，那么就是谁大谁在上面 45 3、父元素的层级再高，也不会盖住子元素 46 47 z-index的值只能是整数 48 z-index的值可以是负数， 49 并且，z-index的默认值auto的值相当于是大于-1，其实我们可以把z-index的值看成0 50 51 52 53 --> 54 <div class="box_parent"> 55 <div class="box box1">box1</div> 56 57 <div class="box box3">box3</div> 58 </div> 59 <div class="box box2">box2</div> 60 61 </body> 62 </html>
四、z-index的默认值
转自或参考：z-index的默认值-CSDN论坛
https://bbs.csdn.net/topics/390156687
1.z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;
正是IE/FF下这一点区别导致ie,ff下z值的不同表现。
2.正常情况下：兄弟（同级）元素后者居上，父子之间子高于父。
3.对于定位元素，（不论IE还是FF）非同级关系和非父子关系元素之间的Z值大小比较，须要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z- index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。
4.对于IE,元素的z-index缺省值是0，如果不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就无法大于“弟”的z- index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了，“弟”元素及其子孙将无法盖过“兄”元素及其子孙。
而对FF,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们自己本身的z-index有关了。