层叠上下文

本文在此文章https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/基础上理解记录，仅供自己学习记录。之前在仿京东页面的时候，在绝对定位上也出现了元素层叠顺序错乱的情况，仅此深入了解。

层叠上下文

一。元素发生层叠情况：

1. float，绝对定位脱离文档流；
2. 子元素层叠于父元素之上。

二。比较元素层叠顺序原则（个人理解）：

1. 层叠上下文元素与层叠上下文元素比
2. 层叠上下文元素与z-index：auto的定位元素比
3. 普通元素和普通元素比
   通过比较后，需要谁上谁下，创建层叠上下文元素设置上下顺序。

三。以下为层叠元素在Z轴上的呈现规律：

1. 层叠上下文元素：由普通元素创建而来，创建方法见后。
2. 层叠水平：所有元素都具备。
3. 层叠顺序：
   个人理解：
   A. 普通元素按此层叠顺序：block → float → inline/inline-block
   B. 层叠上下文元素：层叠上下文元素的border/background → 负z-index → block → float → inline/inline-block → z-index：0 → 正z-index
   C. 若定位元素(position不为static，其z-index为auto时)与不依赖z-index的层叠上下文元素，可看作其z-index：0，层叠水平一致。（遵循后来居上层叠原则）
   
4. 层叠准则：
   （1）谁大谁上：看层叠上下文元素的层叠水平，层叠水平大的元素在上。
   （2）后来居上：层叠水平一直，DOM流的后者居上。
5. 层叠上下文的创建方法：
   （1）根层叠上下文：html元素；
   （2）定位元素(position不为static，其z-index不为auto)时，创建层级上下文元素；
   （3）CSS3与层叠上下文：
   A. 父元素设置display: flex/inline-flex 与子元素设置z-index不为auto，子元素创建层叠上下文;
   B. 设置opacity不为1的元素创建层叠上下文元素;
   C. 设置transform的元素创建层叠上下文元素;
   张鑫旭老师文章中还有设置filter，mix-blend-mode，isolation，will-change，-webkit-overflow-scrolling属性的某些属性值的元素将其创建为层叠上下文元素，我用的比较少，没有验证。