记录工作与生活

Appearance

Return to top
On this page

什么是从父原则:

  1. 子元素在与父辈元素比较的时候，用父辈的 z-index 去比较
  2. 在与同级元素比较的时候，才有自己的 z-index 去比较

什么情况下出现从父原则

  1. 父元素通过fixed absolute relative定位的元素, 子元素也是fixed absolute relative定位的元素。
  2. 在父元素上设置了z-index
  3. 跟父元素同级的元素也是通过fixed absolute relative定位的元素，并且设定了z-index

引用

产生层叠上下文一般有3种方法：

  1. HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
  2. 普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
  3. CSS3中的新属性也可以产生层叠上下文。

引用

创建层叠上下文

  1. HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”
  2. position 属性为 relative 或 absolute（并设置z-index属性）
  3. position 属性为 fixed 或 sticky （无需 z-index 直接产生上下文）
  4. opacity 小于 1
  5. mix-blend-mode 不为 normal
  6. display: flex 或 display: grid （并给子元素设置z-index属性）
  7. 使用transform, filter, clip-path, 或perspective
  8. will-change 值为 opacity 或 transform

张鑫旭

image-20230402002310859

image-20230402002339562