[前端][CSS]用ps的方式理解层叠上下文
？？？？
666
这里父的z-index都是auto，都没有达成创建层叠上下文的条件。不过注意和ps相反的是，自然情况下，html里是后面的元素会在前面元素的上面。像这样。
Photoshop示意图
运行结果
如果在2-1，1-1里设置z-index，就等于按z-index来调整他们的顺序，越大放在越上面。
？？？？
666
Photoshop示意图
这里1-1的z-index大于2-1的z-index，所以就放在了上面
显示结果
而当父达成了创建层叠上下文条件：
比如当id=1的div设置了z-index为具体值，就达成了创建层叠上下文条件。就等于放进了一个组里。
ps
而id=2不改变，所以依然没有满足层叠上下文的条件。2-1是和group 1同层做比较的。
当1的z-index设置小于2-1，则2-1在上，group 1在下，group1的内容都在下。
ps
？？？？
666
运行结果
在group 1内部的元素的z-index，只是在改变它在group1里的排序。类似这样。
ps
所以即使group1里的元素z-index设置大于2-1的z-index，但是也没办法跳出它的父，覆盖到2-1上。
而同理，当group1的z-index比2-1大的时候，它就被放到上面去了。
ps
就算它的子的z-index再小，也不会跑出这组，跑到2-1下面去
？？？？
666
显示
注意如果是这样：
？？？？
666 2-1-1
其实是等于2-1创建了层叠上下文，创建了个group
ps
其他同理
如果把id=2的z-index等于5
就等于2创建了层叠上下文，类似这样
ps
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1vpfff7b4qo0l
