堆叠顺序

35051-2g6h43a7uiq.png
如果是兄弟元素重叠,那么后面的会盖在前面的身上。上图是用一个background:black ;border: red;的父元素div来演示的,且这个父元素没有触发堆叠上下文属性。

堆叠上下文

堆叠上下文相当于单独成立一个部门,比如,我让一个div触发了堆叠上下文的属性,那么他和他的子元素就独立出来了(子元素最低就是z-index为负),这个div在堆叠顺序中的地位决定了他的手下的地位,他的手下的高度是不会低于他下面部门的高度的。
堆叠上文的几种情形:

  • 根元素 (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"的元素

参考链接:张鑫旭博客,MDN