# fixed 从父原则导致 z-index 无效
# 什么是从父原则:
- 子元素在与父辈元素比较的时候，用父辈的 z-index 去比较
- 在与同级元素比较的时候，才有自己的 z-index 去比较
# 什么情况下出现从父原则
- 父元素通过
fixed absolute relative定位的元素, 子元素也是fixed absolute relative定位的元素。 - 在父元素上设置了
z-index - 跟父元素同级的元素也是通过
fixed absolute relative定位的元素，并且设定了z-index
# 这样说有点干，来看一下示例。
示例中带有详细的注释，可以自己动手调一调，就明白啦~
# codepen
# 代码：
<!--
* Author: OBKoro1
* Date: 2019-12-24 13:55:54
* LastEditors: OBKoro1
* LastEditTime: 2019-12-24 14:52:04
* FilePath: /test/index.html
* Description: fixed 从父原则
* https://github.com/OBKoro1
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
}
#father1 {
width: 50px;
height: 50px;
background: red;
position: absolute;
/* position: fixed; */
/* position: relative; */
bottom: 0;
right: 0;
/* TODO: 比father2大 将覆盖father2 */
z-index: 3;
}
#son1 {
/* 子元素在与父辈元素比较的时候，用父辈的z-index去比较。*/
/* 在与同级元素比较的时候，才有自己的z-index去比较 */
width: 100vw;
height: 100vh;
background: orange;
/* position: absolute; */
/* position: fixed; */
position: relative;
top: 0;
left: 0;
z-index: 10;
}
#son2 {
width: 100px;
height: 100px;
background: black;
position: fixed;
top: 0;
left: 0;
color: #fff;
z-index: 8;
/* TODO: 打开将覆盖son1 因为比它们是同级，且son2 z-index比较大 */
/* z-index: 100; */
}
.father2 {
/* TODO: 出现从父原则的情况: 在fixed的父元素设relative和z-index */
/* position: fixed; */
/* position: relative; */
position: fixed;
z-index: 1;
/* TODO: 打开将覆盖father1 因为son1和father1不同级,然后father2比father1的z-index大 */
/* z-index: 10; */
}
</style>
</head>
<body>
<div id="father1">father1</div>
<div class="father2">
<div id="son1">子元素1</div>
<div id="son2">子元素2</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78