CSS

1.层叠顺序

            <div>
                <div class="box1">box1</div>
                <div class="box2">box2</div>
            </div>

1.  两个div都是块级元素时，在后面的会盖住前面的元素，文字层级>背景层级，也就是说，视图上可以看到box1和box2字样，背景色为box2.
2. 两个div都是行内块元素或行内元素时，在后面的会盖住前面的元素，背景层级>文字层级，也就是说，视图上只能看到box2字样，背景色为box2.（也就是说，只要设置了背景，下层的文字透不上来）

2.层叠上下文

默认只有根元素html会产生一个层叠上下文；当使用定位等属性时，也会产生。一般为后一个叠前一个，除非使用z-index来改变层级，以下属性也会产生层叠上下文。

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素