CSS-Z-index

一、没有使用z-index时,元素的堆叠顺序:

  1. 根元素的背景和边框
  2. 非定位的后代块元素,按照在HTML中的出现顺序进行堆叠
  3. 定位的后代块元素,按照在HTML中的出现顺序进行堆叠

二、浮动块的堆叠顺序:

  1. 根元素的背景和边框
  2. 非定位的后代块元素,按照在HTML中的出现顺序进行堆叠
  3. 浮动块
  4. 非定位元素的后代行内元素
  5. 定位的后代块元素,按照在HTML中的出现顺序进行堆叠

三、使用z-index自定义堆叠顺序
注意:z-index只能用于定位了的元素、如果z-index相同,则按照默认规则比较、未指定z-index,默认为auto

  1. 对于定位的元素,z-index对其有影响,堆叠顺序与数字大小符合

四、堆叠上下文
如果任何一个元素满足一下条件之一,就会生成一个堆叠上下文

  1. 文档的根元素(HTML)默认为一个堆叠上下文
  2. position值为"absolute"或"relative",且z-index指定了除了auto以外值的元素
  3. position值为"fixed"或"sticky"
  4. 弹性布局的子元素,且z-index指定了除了auto以外值的元素
  5. opacity的值小于的元素
  6. mix-blend-mode的值不是normal的元素
  7. 以下属性值不为"none"的元素: transform、filter、perspective、clip-path、mask / mask-image / mask-border
  8. isolation值为"isolate"的元素
  9. -webkit-overflow-scrolling值为"touch"的元素
  10. will-change指定了除初始值以外的任何属性的元素
  11. contain值为"layout"/"paint"及含义其中之一的组合值的元素

注意事项:

  1. 在每个堆叠上下文内部,子元素的堆叠规则遵循上面所讲的基本规则。
  2. 堆叠上下文可以包含在其他堆叠上下文内部,它们会创建一个堆叠上下文层级结构。
  3. 堆叠上下文的层级结构与HTML的元素不同,因为对于没有创建堆叠上下文的元素会被父元素同化。堆叠上下文的层级只包括创建了堆叠上下文的元素。
  4. 堆叠上下文独立于其兄弟元素,在处理自身内部堆叠时,只考虑其后代元素。内部堆叠完成后,将当前堆叠上下文当成一个整体,考虑在父堆叠上下文中的堆叠顺序。通俗的说,子堆叠上下文的z-index值只在父堆叠上下文中有意义。

五、注意事项

  1. z-index: 0与z-index: auto并不相同。 z-index: 0 会产生一个堆叠上下文,虽然元素本身堆叠顺序没有影响,但是其子元素的堆叠顺序会有影响。
  2. 不要滥用z-index,将堆叠上下文的层级结构打平。

参考链接:
https://mp.weixin.qq.com/s/7YPt5-9J46R83ouola0Trw

你可能感兴趣的:(CSS)