层叠上下文-块格式化上下文-包含块

发表于

层叠上下文(the stacking context)

职责：处理元素层叠的顺序问题

父层叠上下文：拥有层叠上下文的最近祖父元素，与position无关。


块格式化上下文(formatting-context)

职责：决定了其子元素将如何定位，以及和其他元素的关系


包含块(containing-block)

职责：由定位(position)决定元素大小与位置

注：

  • 事件的捕获与冒泡仍是根据祖先元素传递，与包含块无关，与position无关


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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
    body {

        background-color: tan;
        height: 100vh;
        margin: 0;
    }

    .outer {
        position: absolute;
        background-color: #8980fc;
        height: 400px;
        margin: 30px;
        width: 50%;
        z-index: 1;
    }

    .inner-fixed {
        position: fixed;
        left: 0;
        top: 27%;
        width: 100%;
        background-color: palevioletred;
        padding: 30px;
        box-sizing: border-box;
        z-index: -1;
    }
    </style>
</head>

<body>
    <script>
    // 检测事件流与position属性的关系
    function innerClick(){
        let e = window.event;
        console.log('inner',e.stopPropagation);
    }
        
        function outerClick(){
        let e = window.event;
        console.log('outer',e);
    }
    </script>
    <div onclick="outerClick(this)" class="outer">
        <div onclick="innerClick(this)" class="inner-fixed">这是一个绝对定位了的标题</div>
    </div>
</body>

</html>

  • .inner-fixed元素的父层叠上下文是.outer，父包含块是body。
  • .inner-fixed元素的大小和位置由它的父包含块（body）决定。
  • .inner-fixed元素在body中的层叠顺序跟随父层叠上下文（.outer）。
1
2
3
4
5
6
7
8
.outer {
    position: absolute;
    background-color: #8980fc;
    height: 400px;
    margin: 30px;
    width: 50%;
    /*z-index: 1;*/
}

  • .inner-fixed元素的父层叠上下文是body，父包含块是body
  • .outer元素此时为一个没有层叠上下文的普通元素
  • .inner-fixed元素和.outer元素出于同一个层叠上下文（body）中
  • .inner-fixed元素的层叠顺序要比.outer元素的小