CSS-003-堆叠上下文

堆叠上下文

堆叠顺序

盒模型

一个盒子中主要的属性就5个：

  • width
  • height
  • padding
  • border
  • margin

一个 div 背景色到底在哪个层级？

1
2
3
4
5
6
7
8
div{
    width:200px;
    height:200px;
    border:10px solid red;
    padding:15px;
    margin:15px;
    background:black;
}
  • 给 border 设置半透明，你发现 black 在后面

结论

背景色在border的后面

div上有文字内容 谁先谁后？

答案是

1
背景色 >  border > 文字/内联元素

情况复杂了

  • parent 里的 child 有文字
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .parent{
        width:200px;
        height:200px;
        border:10px solid rgba(255,0,0,0.5);
        padding:15px;
        margin:15px;
        background:green;
        color:red;
    }
    .child{
      background:pink;
      margin-top:-15px;
      color:black;
    }
  </style>
</head>
<body>
  <div class="parent">
    AAAA
    <div class="child">BBB</div>
  </div>  
</body>
</html>

结论

1
2
3
4
- parent的文字 会盖住 child 的背景色
- child的文字 会盖住 parent的 文字，因为它是后出现的

background > border > child的 div/块级元素 > 文字/内联元素

如果有浮动元素呢？

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
<!DOCTYPE html>
<html>
<head>
  <style>
    .parent{
        width:200px;
        height:200px;
        border:10px solid rgba(255,0,0,0.5);
        padding:15px;
        margin:15px;
        background:green;
        color:red;
        text-indent:-10px;
    }
    .child{
      background:pink;
      color:black;
      height: 30px;
    }
    .float{
      float:left;
      background:blue;
      height: 30px;
      width: 30px;
    }
  </style>
</head>
<body>
  <div class="parent">
    AAAA
    <div class="float"></div>
    <div class="child"></div>
  </div>  
</body>
</html>
  • 浮动元素 盖住了 child 说明，浮动元素天生比块级元素要高
  • parent的文字 盖在 浮动元素上面

如果浮动元素里面有文字咋办？

  • 答案是 浮动元素 是 parent 的孩子节点， parent的文字 显示层级天生就比 浮动元素高
1
2
3
4
5
6
- parent的文字 会盖住 child 的背景色
- child的文字 会盖住 parent的 文字，因为它是后出现的
- 浮动元素 会盖住 child
- parent的文字 会盖住 浮动元素

background > border > child的 div/块级元素 > 浮动元素 > 文字/内联元素

定位元素呢？

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
<!DOCTYPE html>
<html>
<head>
  <style>
    .parent{
        width:200px;
        height:200px;
        border:10px solid rgba(255,0,0,0.5);
        padding:15px;
        margin:15px;
        background:green;
        color:red;
        text-indent:-10px;
    }
    .child{
      background:pink;
      color:black;
      height: 30px;
    }
    .float{
      float:left;
      background:blue;
      height: 30px;
      width: 30px;
      margin-top:-10px;
    }
    .relative{
      position:relative;
      height: 50px;
      width: 50px;
      background:orange;
    }
  </style>
</head>
<body>
  <div class="parent">
    AAAA
    <div class="relative"></div>
    <div class="float"></div>
    <div class="child"></div>
  </div>  
</body>
</html>
  • 定位元素会在 float 之前

z-index

1
2
3
parent 内 同级别元素直接加 z-index 不会影响 堆叠顺序

只有 position不为 static 默认值的元素 z-index才会生效

堆叠顺序

可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

  • 根元素 (HTML),
  • z-index 值不为 “auto”的 绝对/相对定位 （只记住这个就行了，其他凭感觉）
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
  • transform 属性值不为 “none”的元素，
  • mix-blend-mode 属性值不为 “normal”的元素，
  • filter值不为“none”的元素，
  • perspective值不为“none”的元素，
  • isolation 属性被设置为 “isolate”的元素，
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
  • -webkit-overflow-scrolling 属性被设置 “touch”的元素