堆叠上下文

堆叠顺序

堆叠上下文_第1张图片
8层堆叠顺序

在这里,负的z-index在最下层(因为父元素没有定位)
可是如果父元素定位呢?负的z-index就会出现在border之上div之下。也就是说负的z-index的位置是不确定的。
所以顺序为:
1.background
2.border
3.块级
4.内联
5.z-index: 0
6.z-index: +

堆叠上下文

堆叠上下文的概念说不清楚,我们可以在MDN上看,什么时候会触发堆叠上下文:

  • 根元素 (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"的元素
  • 同级的谁后出现,谁出现在上边;
  • z-index只能给定位元素加;

比如,如果两个人A,B都在同一个部门,那么高低比较就按照他们两个人的权利(z-index比较),但是如果两个人在不同的部门,这个时候就要比较部门的高低(z-index)。负z-index的位置,如果没有堆叠上下文,它就在最下边,但是如果触发了堆叠上下文,他就只能在border与div之间(也就是他们是同一个部门的,不让跑出去。)

其他

  • text-indent

你可能感兴趣的:(堆叠上下文)