返回知识库

产品与设计 · 布局基础

层叠顺序Z-Index

层叠顺序不是数字竞赛:它只在同一堆叠上下文内比较,应由有限层级表管理。

修复盖住结账弹窗的下拉菜单

结账页层级检查 · 弹窗打开时,下拉不得盖住它
结账弹窗 · layer 100付款信息不能被菜单遮挡
Toast · layer 200

先读物件标签。

层叠规则

  • z-index 只在同一堆叠上下文比较。
  • 内容 < 下拉 < 弹窗 < toast。

什么时候用,怎么用

界面真的重叠时建立有限层级表;普通排版问题不要用 z-index 掩盖。

正反例

正例 · 弹窗 100

付款区盖住下拉。

反例 · 下拉 9999

菜单盖住弹窗,规则失控。

快速自测

弹窗被遮挡,先做什么?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。