css元素的堆叠顺序（z-index堆叠上下文(stack contex)）

问题：什么是堆叠上下文？怎样才能形成堆叠上下文？在堆叠上下文中，元素是怎么排列的？

结论：元素是根据堆叠上下文排列的，如果设置了z-index则形成了一个堆叠上下文。同一个堆叠上下文中的元素，按照其z-index的顺序堆叠，没有设置则按照其内部元素出现的顺序堆叠。

详解：

一、没有z-index的情况，按照下列原则排列：

1.position为static处在默认的堆叠上下文中，（忽略top left right  bottom z-index ）。而position为relative的元素处在z-index为auto的堆叠上下文中。所以，如果relative的元素和static的元素重叠的话，relative的元素在上面。即z-index为auto的堆叠上下文中 > 默认的堆叠上下文

2.在2层元素的第2层使用z-index，在3层元素的第2层使用z-index

z-index只针对position为relative、absolute、fixed的元素，那么，z-index是否只是针对兄弟元素呢？我们看下面的例子：

 如上图#1和#2元素为2个平级根元素，position为relative，＃2元素为＃1的子元素，position为absolute，＃4为＃3的子元素，position为absolute。由于4个元素均没有设置z-index，那么，4个元素按照其出现顺序堆叠。

它们形成的堆叠上下文是：root

3.

上图形成的堆叠上下文为：

DIV #2

DIV #4

所以，元素4在元素2上面。

4.

上图形成的堆叠上下文为：

#2

#3

      #4

所以，＃2和＃3是平级的，即使＃4的z-index最大，它也在因为处在＃3形成的堆叠上下文中，而处在＃2元素下面。

详见文章：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1