2022.2.10 z-inde与opacity

z-index:可以设置元素的叠加顺序，但依赖定位属性。
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖
z-index支持负值；
z-index支持CSS3 animation动画；

1. z-index：auto；默认值，如果不对z-index设置，默认为auto；
2. z-index：；整数值，z-index：1，z-index：2等
3. z-index：inherit；继承

7阶层叠水平（stacking level），用来判断元素发生层叠时谁在上谁在下：

正z-index
z-index：auto或者z-index：0
inline/inline-block浮动盒子
float浮动盒子
block块状水平盒子
负z-index
层叠上下文background/border

---

opacity：opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。