amis/packages/amis-ui/scss/helper/layout/_z-index.md
liaoxuezhi c591ab4381
chore: 开发环境切成 vite (#5677)
* 尝试使用 vite 跑开发环境

* 尝试使用 vite 跑开发环境

* 尝试使用 vite 跑开发环境

* 尝试使用 vite 跑开发环境

* 样式文档调整

* 修复有多个 __inline 时的报错

* scirpt 调整

* feat:chart接入事件动作 (#5669)

* chore: input-group 没有 name 不应该报 warning (#5667)

* chore: 处理编译TS Warning,调整TableStore中label解析的顺序 (#5670)

* feat: timeline时间轴支持自定义图标 (#5668)

* fix:折叠器Collapse自定义图标&inputNumber对含后缀生效

* 修改

* 正则修改

* 正则修改

* 正则修改

* feat:将默认px替换为rem 2px===0.125rem

* feat:timeline时间轴支持自定义图标

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* fix: 调整echarts-stat使用方式,兼容vite打包异步非esm模块 (#5672)

* feat: chart 支持配置加载 geojson 及百度地图 (#5674)

* feat: chart 支持配置 geoURL 及 geoName

* 增加百度地图配置

* chore: 修复 coverage 运行报错 (#5678)

* chore: coverage 执行换成 v8 解决内存问题 (#5679)

* 尝试使用 vite 跑开发环境

* amis-formula 也添加 esm 模块

* 代码合并有问题,做些调整

Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com>
Co-authored-by: 吴多益 <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>
Co-authored-by: 徐佳豪 <1440054388@qq.com>
Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
Co-authored-by: 刘丹 <365533093@qq.com>
2022-11-02 22:45:12 +08:00

1.8 KiB
Raw Blame History

title
Z-Index

Utilities for controlling the stack order of an element.

Class Properties
z-0 z-index: 0
z-10 z-index: 10
z-20 z-index: 20
z-30 z-index: 30
z-40 z-index: 40
z-50 z-index: 50
z-auto z-index: auto

用法

<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
  <div class="z-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-extrabold">5</div>
  <div class="z-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-extrabold">4</div>
  <div class="z-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-extrabold">3</div>
  <div class="z-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-extrabold">2</div>
  <div class="z-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-extrabold">1</div>
</div>

响应式设计

支持通过添加设备前缀 m: 或者 pc: 来分别针对「手机端」或者「pc端」设置样式更多说明请前往「响应式设计」

状态前缀

不支持「状态前缀」,有需求请提 issue