amis 辅助类 Z-Index 用法详解：用 z-* 工具类精确控制元素层叠顺序

amis 辅助类 Z-Index 用法详解用 z-* 工具类精确控制元素层叠顺序【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis在 amis 前端低代码框架中页面由 JSON Schema 描述、最终渲染为 DOM开发者通常通过className直接挂载原子化的工具类Utility Class来控制布局与视觉表现。z-index工具类z-0、z-10至z-50、z-auto正是其中用于控制元素层叠顺序stack order的一组核心样式类。阅读本文后你将掌握 amis 辅助类体系中 z-index 类的完整取值清单、在 JSON 配置与原生 HTML 中的用法、m:/pc:设备前缀的响应式写法以及它不支持状态前缀这一限制的规避方案。一、z-index 工具类是什么在 CSS 中z-index决定同一层叠上下文stacking context内元素的垂直显示顺序数值越大元素越靠上。amis 的辅助类体系Helper Classes位于 packages/amis-ui/scss/helper把这一属性做成了开箱即用的原子类开发者无需编写自定义 CSS只需在className里声明对应类名即可。这些辅助类与 amis 官方文档中的「辅助类 - 响应式设计」「辅助类 - 状态样式」同属一套体系在 packages/amis-ui/scss/helper.scss 中被统一引入import ./helper/layout/z-index;随 amis-ui 的样式构建一并产出。二、完整类名与属性对照表依据 packages/amis-ui/scss/helper/layout/_z-index.md 及对应的 packages/amis-ui/scss/helper/layout/_z-index.scssz-index 工具类共提供 7 个取值ClassPropertiesz-0z-index: 0z-10z-index: 10z-20z-index: 20z-30z-index: 30z-40z-index: 40z-50z-index: 50z-autoz-index: auto取值刻意控制在 050 之间、以 10 为步长另有auto用于还原浏览器默认行为这种设计便于记忆和快速组合也符合辅助类「够用即可、避免随意堆叠大数值」的初衷。三、源码级实现一个 mixin 生成全部类从源码看这些类并非手写而是通过 Sass mixin 统一生成的。packages/amis-ui/scss/helper/layout/_z-index.scss 中的实现如下mixin make-z-index($prefix: .) { each $name, $value in ( 0: 0, 10: 10, 20: 20, 30: 30, 40: 40, 50: 50, auto: auto ) { #{$prefix z- $name} { z-index: $value; } } } include make-z-index(); each $deivce in map-keys($devices) { include media-device($deivce) { include make-z-index(. selector-escape($deivce :)); } }关键点可以拆成三层理解基础类include make-z-index();直接生成.z-0、.z-10….z-auto这 7 个类作用于所有视图模式。设备前缀类随后遍历$devices中的设备键m、pc在对应媒体查询内再次调用make-z-index(.m:)与make-z-index(.pc:)从而生成m:z-20、pc:z-50这类带前缀的类名。设备断点定义在 packages/amis-ui/scss/_variables.scss$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default;媒体查询实现media-devicemixin 定义于 packages/amis-ui/scss/_mixins.scss本质是把map-get取到的媒体条件包进media规则中即m:前缀类只在(max-width: 768px)生效pc:前缀类只在(min-width: 769px)生效。四、用法示例让层叠顺序一目了然原文档给出了一个直观的叠加示例packages/amis-ui/scss/helper/layout/_z-index.md。五个大小相同的色块都设置了relative定位并依次使用z-40、z-30、z-20、z-10、z-0同时配合-left-*、top-*偏移让它们部分重叠最终视觉上按数字 5 → 1 从上层到下层排列div classflex ... justify-center relative h-28 text-center transform translate-x-12 div classz-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold5/div div classz-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold4/div div classz-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold3/div div classz-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold2/div div classz-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold1/div /div两点使用提醒z-index只对已定位的元素position为relative、absolute、fixed或sticky生效这也是示例中每个色块都带relative的原因。需要定位类时可配合辅助类体系中的 position 工具类 使用。z-auto等价于不写z-index用于覆盖/还原其他样式带来的显式数值。在 amis 页面中同样思路可以直接写进组件的className{ type: tpl, className: relative z-50, tpl: 这段内容具有最高的层叠级别z-index: 50 }五、响应式设计m:与pc:设备前缀与辅助类体系的整体规则一致z-index 类也支持设备前缀用来分别针对「手机端」与「PC 端」设置不同的层叠顺序类名前加m:→ 只在移动端视口宽度 ≤ 768px生效类名前加pc:→ 只在桌面端视口宽度 ≥ 769px生效不加前缀 → 对所有视图模式生效移动端与 PC 端通用。示例div classrelative m:z-10 pc:z-50 ...响应式层叠顺序移动端在上层下方PC 端在最上层/div从源码可以看到带前缀的类由each $deivce in map-keys($devices)循环调用media-device生成见上文第三节因此m:z-0、m:z-10…pc:z-auto等全部 7 个取值 × 2 种前缀的组合在编译产物中均可用。关于响应式设计更完整的说明含 schema 在线示例请参阅 「辅助类 - 响应式设计」。六、状态前缀不支持及替代方案与其他部分辅助类不同z-index 工具类不支持状态前缀如hover:z-50、focus:z-40这类写法。原文档在 packages/amis-ui/scss/helper/layout/_z-index.md 中明确说明不支持「状态前缀」有需求可提 issue。如果确实需要「悬浮时把元素提到最上层」这类交互效果可以结合 amis 的事件与样式能力实现例如{ type: button, label: 悬浮高亮, onEvent: { mouseenter: { actions: [ { actionType: setStyle, style: {zIndex: 50} } ] }, mouseleave: { actions: [ { actionType: setStyle, style: {zIndex: } } ] } } }或直接为组件配置自定义className 少量 CSS在hover选择器下提升层叠级别。状态前缀的整体机制hover:、group-hover:、focus:、active:、disabled:以及设备前缀与状态前缀的组合写法可参考 「辅助类 - 状态样式」。七、使用场景小结在 amis 页面开发中z-index 工具类最典型的应用包括浮层与弹窗为下拉、气泡、抽屉等浮层组件设置较高的z-50确保其覆盖下层内容卡片叠加展示像原文档示例那样用不同z-*层级叠卡片营造纵深视觉粘性/定位元素为relative或sticky的导航条、操作栏指定明确的层叠顺序避免被其他元素意外遮挡移动端差异化用m:z-*/pc:z-*在不同视口下设置不同层级适配触屏场景下的吸底操作栏等布局。无论使用哪个取值都建议遵循「从 10 到 50、间隔 10」的阶梯式设计配合 CSS 层叠上下文规则如transform、opacity等属性会创建新的层叠上下文即可在 amis 的 JSON 化开发中稳定、可预期地控制页面元素的显示层级。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考