深入了解z-index层叠规则

• 什么是层叠规则
  层叠规则就是指当网页中的元素发生发生层叠时的表现规则
• 怎么使用z-index属性
  z-index属性只有和定位元素（position不能为static的元素）在一起的时候才能使用，也可以时正数也可以是负数，数值越大，层级越高，但是随着css3的出现，z-index不仅只对定位元素有效，flex盒子的元素也有效
• 什么是层叠水平
  层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素
• 理解层叠顺序

1. 位于最下面的background/border特指层叠上下文元素的边框和背景，每一个层叠顺序规则仅适用于当前层叠上下文的小世界
   2.inline水平盒子指的是包括inline/inline-block/inline-table元素得到层叠顺序，它们都是同等级的
   3、从层叠水平上来看，实际上z-index：0和z-index：auto是一样的

• 层叠的准则
  1.水大谁上，如生效的z-index属性值，在同一层叠上下文领域，层叠只越大的哪个会覆盖层叠值小的那个
  2.后来居上，当元素的层叠水平一致、层叠顺序相同时，DOM流中处于后面的元素会覆盖前面的元素
• z-index负值深入了解
  z-index负值元素层级是在层叠上下文元素上面的、block元素的下面，也就是z-index虽然名为负数层级，但依然无法突破当前层叠上下文所包裹的世界

标签：index,顺序,层叠,元素,规则,inline,上下文
来源： https://www.cnblogs.com/CHEN-JING-YANG/p/16124887.html