元素堆叠顺序问题

前言

在学习css浮动脱离元素文档流，还有z-index，背景图，背景颜色出现颜色覆盖问题时，我总会产生一种疑惑，疑惑这几项谁覆盖谁，谁的优先级更高？

堆叠顺序

堆叠顺序有两种，第一种是基于z-index，第二种是没有z-index情况下。

由于页面中的元素是一个三维图形，如下

我们的视野看到的就是z-x这个平面，产生堆叠是在y轴上假设y轴离源点越远，那么他的优先级就越高

堆叠顺序如下:

1. 根元素的背景和边界优先级最低
2. 没有position和postion:static的优先级比1要高一级
3. 优先级最高的是定位元素，但是在定位元素中还要区分优先级，他们的优先级确认是通过元素出现的顺序，顺序越后面同组下优先级越高

实际上我这样描述只是为了理解，真正能够在y轴上移动是z-index，但是不这样理解又无法理解。

有Z-index的情况

我这里把MDN描述的z轴看成y轴，z-index只会对定位元素起作用。z-index为0的时候就是一开始根元素所在那个平面

z-index可以设置为正负值，无论正负值就是在相对于根元素的平面移动

z-index也不是万能，当出现两个元素z-index相同的时候还是得出动没有index情况下的处理，按照元素定义的顺序去处理。