css层叠水平探究

1 .普通元素的层叠水平优先由层叠上下文决定。因此层叠水平的比较只有在当前层叠上下文中才有意义
2 .层叠水平和css的z-index属性并不是同一个东西。z-index只能作用于定位元素以及flex盒子的孩子元素，而层叠水平所有的元素都存在

层叠顺序

1 .当有明显的层叠水平标识的时候，如可以识别的z-index值。层叠顺序大的会覆盖小的那一个

z-index无效的几种情况

1 .z-index只对定位元素有效

1 .设置了position属性的元素。这个第一条就解决了问题。
2 .absolute,relative,fixed肯定有效，inherit取决于父元素，如果父元素没有设置定位则失效，低版本的ie浏览器不支持这个值
3 .static：静态定位。默认值，表示当前元素不进行定位，如果元素设置了这个属性值，其实是和没有设置一样的，会使元素忽略掉z-index属性，使其不起作用
4 .当父元素的层叠优先级比其他元素低的时候。以父元素的值作为依据，这个时候就应该取释放掉父元素的z-index值
5 .同一个父元素下的层叠效果会受父元素的z-index影响，如果父元素的z-index值很小，那么子元素的z-index很大也不起作用
6 .父元素设置为relative无效，这个场景倒是没见过

2 .https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
为什么原理这么复杂。。