微信扫一扫打赏支持

范仁义css3课程---28、元素的层级

范仁义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有关了。

 

 

 

 
posted @ 2020-02-09 12:18  范仁义  阅读(288)  评论(0)    收藏  举报