📐

CSS z-index 层叠上下文可视化

添加元素，设置 z-index 和触发层叠上下文的属性，实时查看层叠顺序

层叠画布（按 z-index 顺序渲染，后面的在上方）

层叠顺序（底 → 顶）

编辑属性： —

点击左侧元素或画布中元素，选择后编辑属性

层叠上下文触发条件说明

以下属性会新建一个层叠上下文，使子元素的 z-index 相互独立：
· position: relative/absolute/fixed/sticky 且 z-index ≠ auto
· opacity < 1
· transform ≠ none
· isolation: isolate
· will-change 、 filter 、 perspective 等

子元素的 z-index 只在 同一层叠上下文 内比较，跨上下文比较其 父容器 的 z-index。

生成 CSS

/* 添加元素后自动生成 CSS */