z-index的特点

思路:
①z-index的结构/定位元素默认的z-index
②z-index单位
③能不能用子元素和父元素比较
④父元素没有z-index，能不能通过子元素控制他们的层级=>改变层级，父元素z-index
z-index属性的特点

  1. 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
  2. 可以使用z-index属性修改定位元素的层级关系
  3. 所有定位元素的z-index默认值都是一样的
  4. z-index值是数字没有单位,支持负数
  5. 一般都是同级元素进行层级的比较

当参照物是相对定位或绝对定位的时候,父级元素之间没有z-index值,子级元素的z-index 值会出来做比较

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*
 8  z-index的特点
 9  1.都有定位元素的标签 在后面的标签的z-index要比在前面的z-index的值要大
10  z.z-index没有单位 支持负值
11  3.z- index一般都是同级元素的比较 子元素和父元素去比较z-index并不遵
12  循我们说的规律:值越大越在上(我们一般不会拿子元素去跟他的父元素去比较
13  z-index的大小)
14  4.z-index属性不能继
15  */
16 .red{
17 width: 200px;
18 height: 200px;
19 background-color: red;
20 position: absolute;
21 z-index: -1;
22 }
23 .blue{
24 width: 400px;
25 height: 400px;
26 background-color: blue;
27 position: absolute;
28 z-index: 9;
29 }
30 .wrap{
31 width: 500px;
32 height: 500px;
33 background-color: #ccc;
34 position: relative;
35 z-index: 99;
36 }
37
38 .parent1{
39 position:absolute;
40 width: 200px;
41 height: 200px;
42 background-color: #A52A2A
43 }
44 .parent2{
45 position:absolute;
46 width: 300px;
47 height: 400px;
48 background-color: #FF00FF
49 }
50 .son1,.son2{
51 position: relative;
52 }
53 .son1{
54 z-index: 9;
55 }
56 .son2{
57 z-index: 10;
58 }
59 </style>
60 </head>
61 <body>
62 <!-- <div class="red"></div>
63 <div class="blue"></div> -->
64 <div class="wrap">
65 <div class="blue"></div>
66 <div class="red"></div>
67 </div>
68
69 <div class="parent2">
70 <div class="son2"></div>
71 </div>
72 <div class="parent1">
73 <div class="son1"></div>
74 </div>
75 </body>
76 </html>
赞 (0)

相关推荐