快速尝试:
1、点击CLICK
2、打开控制台,开启#app上的对应属性
【说明】
- 创建叠层上下文后,#app即生成新的叠层上下文,此时内部节点的z-index即以该叠层上下文为基准
- 即在z-index此时:#app:auto < mask:100,dialog的101将不再与mask的100进行对比
- 若#app上存在以下属性(各注释中的属性组合存在),均会创建叠层上下文:
/* position: relative;
z-index: 100; */
注:≯遮罩z-index
/* opacity: 0.9999; */
注:≠1即可
/* transform: translate(0); */
注:≠none即可
/* overflow: auto;
-webkit-overflow-scrolling: touch; */
注:-webkit-overflow-scrolling 手机端起效
/* position: fixed; */
/* filter: blur(0); */
/* mix-blend-mode: darken; */
/* will-change: transform; */
/* isolation: isolate; */
除以上还有:
{ body.display=flex, #app.z-index≠auto }
时,也会创建层叠上下文