Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

z-index

介绍

z-index 属性设定了一个元件及其后代元件或 flex 项目的 z-order。当元件之间重叠的时候，z-index 较大的元件会覆盖较小的元件在上层进行显示。

常见问题

如果想生成 stacking context 可以给元件增加 z-index: 0，例如给 scroll-view 添加 z-index: 0 可以避免子元件不跟随滑动

不建议在 list 直接子元件使用 z-index，可能影响 list 复用，如果在 list item 里面使用可以将 item 作为 stacking context

使用示例

css-apisrc/z-index/App.tsx
预览

语法

z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;

取值

  • <number> 表示此元件的堆叠顺序。

  • 默认值 auto

形式定义

初始值空值
适用元素所有元件
是否支持继承no
是否支持动画no

形式语法

z-index = <integer>

与 Web 的区别

Web 默认的是 auto，Lynx 是通过是否设置 z-index 来判断是否 auto

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。