CSS学习--堆叠

一、堆叠顺序

1.border覆盖在background上面

2.文字/内联元素覆盖在border上面

3.文字/内联元素覆盖在div/块级元素上面

4.文字/内联元素覆盖在浮动元素上面

5.浮动元素覆盖在div/块级元素上面

6.浮动元素内的文字低于浮动元素外面的文字

7.定位元素position:relative高于文字/内联元素

8.给span加z-index并不能高于目前最高的定位元素position:relative

给浮动元素加z-index也不会高于定位元素

z-index只能加在定位元素

9.同级的定位元素，后面出现的高于前面出现的

如果想要前面出现的高于后面出现的，加z-index：1（z-index的auto是0，所以大于0即可）

z-index的值越大，那一层就越高

10.绝对定位position:absolute同相对定位position:relative一样

不管是绝对定位还是相对定位，只按照z-index来决定堆叠顺序

11.z-index为负低于background（这里需保证它的父级不是定位元素）

12.总结

如果是同级元素重叠，那么后面的盖在前面的身上。

二、堆叠上下文

堆叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有堆叠上下文，我们可以理解为这个元素在z轴上就“高人一等”（视觉上在最外层）。

有以下标识的是堆叠上下文：

 根元素 (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"的元素
复制代码

转载于:https://juejin.im/post/5b39cd876fb9a00e35684a83