层叠上下文【stacking context】与层叠顺序【stacking order】

当css按以下设置，则出现红色在绿色之上的效果。
原因：要比较div-1-1与div2-1-1的上下，则先找到div1与div2在同一层级。而div1为普通元素,div1-1为层叠上下文元素，div2为层叠上下文元素，所以这时候div2与div1,div1-1在同一 个层叠上下文，而div1-1的z-index为1，div2的z-index为1，DOM流中div2在div1-1之后，所以红色在绿色之上。若此时将div1-1的z-index设置为2时，则会出现绿色在红色之上的效果。