总结：

• 总结：-z-index(parent没有定位。) < background < border < div块级元素 < 浮动元素 < 文字内联元素（inline-block元素属于inline元素）< position: relative; / absolute; （0z-index或autoz-index）< 正z-index.（此排序是父容器没有被定位。）
• 如果parent即整个div是被定位的,那么负z-index会突然改变出现在border前面。
  总代码示例：

什么是堆叠顺序？

• div不是平面的东西，垂直于屏幕方向也是有层次关系的。这个层次关系就叫堆叠上下文。
• 里面的文字区域（内联元素），是更靠近用户的。
• 如果块级元素里面有块级元素和内联元素，子块级元素是盖不住内联元素的。
• 文档流里面后出现的（文字）元素盖住先出现的文字元素。后盖前！
  同级互相比较，后出现的同一类元素盖住先出现的。
• 浮动元素在文字下面，在块级元素的前面。
• 浮动元素里面的文字没有浮动元素外面的文字高的，但是高于div元素。
• 只有被定位的元素加z-index才能变高。即position不是默认值。
• 对于position: relative;和position:absolute设置z-index: 0 / auto都不能使其变高，1可以。1可以盖住0,2可以盖住1和0。（一个绝对定位一个相对定位也一样。）
• 不管是绝对定位还是相对定位，都是通过z-index看层叠关系。
• 如果parent没有定位，那么z-index:-1会出现在最底层。
• text-indent可以让文字（ 内联元素）横向移动。
• margin让块级元素上下移动，不要加position，以防改变性质。
• 总结：-z-index(parent没有定位。) < background < border < div块级元素 < 浮动元素 < 文字内联元素（inline-block元素属于inline元素）< position: relative; / absolute; （0z-index或autoz-index）< 正z-index.（此排序是父容器没有被定为。）

parent被定位了。

• 如果parent即整个div是被定位的，而且z-index不等于auto,那么负z-index会突然改变出现在border前面。

堆叠上下文：

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
在之前的增加的z-index的列子中，某些div的渲染顺序是由z-index的值影响的，这是因为这些div具有使他们形成一个层叠上下文的特殊属性。

文档中的层叠上下文满足以下任意一条的元素形成：

• 根元素 (HTML),
• z-index 值不为 auto的 绝对/相对定位，影响z-index:-1
• 一个 z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• ** opacity 属性值小于 1 的元素**
• transform 属性值不为 none的元素，
• mix-blend-mode 属性值不为 ormal的元素，
• filter值不为none的元素，
• perspective值不为none的元素，
• isolation 属性被设置为 isolate的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• webkit-overflow-scrolling 属性被设置 touch的元素.
• 只要变成堆叠上下文，那里面的负z-index就会变成1
  只要父元素上触发堆叠上下文，负z-index就会跳出来。

堆叠上下文对z-index的影响

堆叠上下文主要 是影响z-index。

• 如果b比a高一点点，那么b里面所有的东西都比a高一点点。
  代码示例：