总结：
-
总结：-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高一点点。
代码示例：
