css之z-index属性

** z-index只对定位元素有用(relative/absolute/fixed/sticky)**

• 如果定位元素z-index没有嵌套(z-index值为数值，不是auto)
  1.后来居上
  
  

  后来居上
  
  2.哪个大，哪个上。
  
  

  值大在上
• 发生嵌套
  祖先优先原则

祖先优先

css层叠上下文和层叠水平

W3C中这样描述

每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。

在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。

同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。

不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

层叠上下文

• 页面根元素自带层叠上下文
• z-index属性为数值的定位元素带层叠上下文
• 其他

层叠水平

层叠水平

层叠水平必须放在层叠上下文中来观察，层叠水平和z-index不同，普通元素也有层叠水平。

层叠上下文的性质

层叠顺序

层叠顺序

规范元素层叠时的规则

z-index与层叠上下文

z-index与层叠上下文

#######opacity与层叠上下文
我们知道 opacity
属性是用来设置元素不透明度的。但可能知道 opacity
和层叠上下文有关的不多，不过没关系，这里我们简单聊聊这个话题，有两点必须注意：
当opacity值小于1时，该元素会创建新的局部层叠上下文，也就是说它可以和定位元素进行层叠层别比较
当opacity值小于1时，该元素拥有层叠级别且相当于z-index:0或auto，但不能定义 z-index ，除非本身是定位元素

简单来说，当一个普通的元素定义了 opacity
的值小于1时（比如 opacity:.5），那么该元素的层叠级别将会高于普通元素，其效果类同于定位元素没有显式定义 z-index
的情况，唯一的区别是没有显式定义 z-index
的定位元素不会产生局部层叠上下文，而定义了 opacity
值小于1的元素会产生新的局部层叠上下文。

总结：判断元素在Z轴上的顺序，先判断元素父级层叠上下文的顺序，然后在具体层叠上下文中根据层叠顺序来判断顺序。
附上一篇实例文章css-index实验