从弹出菜单想到 z-index 管理

111 阅读1分钟

今天我看到popover点击其他地方的另一种实现方式,在弹出菜单的时候,在全屏铺一个看不见的 div,这样点击 div 就是点击别处,这是一种比较简洁的实现方式。比如github的侧边弹出导航栏就是如此。
但这样其实是有前提的 那就是这个网站的 z-index 管理做得比较好,否则容易出现 div 被导航条遮住的情况。所以这种方式不适合屎山项目。
一般来说前端架构师在网站搭建初期就要给 z index 分层:

0+ 用于普通内容
16+ 用于导航
32+ 用于导航菜单
64+ 用于 tooltip
128+ 用于 popover
256+ 用于对话框
1024+ 用于 loading
2048+ 用于全屏

类似这样。否则你会发现不管你的 zindex 多大,都会有人比你更大,比如到处都是 z-index: 9999。 中枪的举手✋🏻!