你有多久没写 z-index 了

原创已于 2026-06-14 13:00:57 修改 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

于 2026-06-14 13:00:10 首次发布

一、突然想起 z-index

前两天看到有人在群里聊 IE6 兼容性问题，突然就想起了 z-index。

很久没写过这东西了。

以前可不是这样的。

css

.modal {
  z-index: 9999;
}
/* 被盖住了？再来 */
.modal {
  z-index: 99999;
}
/* 还不够？ */
.modal {
  z-index: 999999;
}

最夸张的一次，弹窗被第三方客服组件盖住了，人家自带 z-index: 99，我直接上了 z-index: 999。后来另一个弹窗又被盖住，没办法了，改第三方源码。

二、z-index 还是那个 z-index，是布局方式变了

它功能一直就一个：控制谁在上面谁在下面。但以前需要叠层才能实现的效果，现在不需要了。

固定导航栏：

css

/* 以前 */
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
.content {
  margin-top: 60px; /* 手动避开导航 */
}

css

/* 现在 */
.header {
  position: sticky;
  top: 0;
}

不用写 z-index，不用手动算偏移。sticky 自动吸附。

弹窗遮罩：

css

/* 以前：全靠数字硬扛 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

css

/* 现在：变量统一管理 */
:root {
  --z-overlay: 400;
  --z-modal: 500;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-overlay);
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
}

9999 变成了 var(--z-modal)，全局一个文件管好，不会乱。

多栏布局：

css

/* 以前：float 硬扛 */
.sidebar {
  float: left;
  width: 200px;
}
.content {
  margin-left: 200px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

css

/* 现在：Flex 一行搞定 */
.layout {
  display: flex;
  gap: 16px;
}
.sidebar {
  width: 200px;
  flex-shrink: 0;
}
.content {
  flex: 1;
}

等分排列：

css

/* 以前：float + 手动算宽度 */
.item {
  float: left;
  width: 33.33%;
}
/* 高度不一致就错位，还得加 clearfix */

css

/* 现在 */
.row {
  display: flex;
  gap: 16px;
}
.item {
  flex: 1;
}

页面骨架：

css

/* 以前：各种定位拼凑 */
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
.sidebar {
  float: left;
  width: 200px;
  margin-top: 60px;
}
.content {
  margin-left: 200px;
  margin-top: 60px;
}
.footer {
  clear: both;
}

css

/* 现在：Grid 声明式布局 */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}
.header {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
}
.sidebar {
  grid-row: 2;
}
.content {
  grid-row: 2;
}
.footer {
  grid-column: 1 / -1;
}

不用手动算偏移，不用 clearfix，不用 z-index。Grid 一个模板填进去，完事。

三、以前的 CSS 兼容性写法

那时候写布局，不仅要搞定布局本身，还得搞定 IE。

css

/* IE6 双边距 bug */
.float-box {
  float: left;
  margin-left: 20px;
  display: inline; /* IE6 下加这个才能让 margin 不翻倍 */
}

css

/* 透明度兼容全浏览器 */
.transparent {
  filter: alpha(opacity=50); /* IE6-8 */
  opacity: 0.5; /* 标准浏览器 */
}

css

/* 各浏览器前缀 */
.rounded {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
}

css

/* IE6 PNG 透明 */
.logo {
  background: url(https://blog.csdn.net/logo.png);
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png');
  _background: none; /* IE6 专有 hack */
}

css

/* 盒模型统一 */
.box {
  width: 200px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

css

/* Flex 兼容写法 */
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

css

/* 现在：Grid 原生支持 97%+ 浏览器，直接写 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

以前一个属性写四五遍，现在一遍就够了。

四、不只是 CSS

这种变化不只发生在 CSS 里。

以前写数据库访问，自己手写 SqlHelper，每条 SQL 都烂熟于心。现在 Entity Framework 一行 Linq 搞定。以前异步回调写到天亮，现在 async/await 让异步和同步一样顺。以前引用第三方库，满世界下载 DLL，现在 NuGet 一键安装。以前管几个服务，用户不找我，我都不知道挂了。现在云哨兵挂上去，有事主动通知，不用自己盯着。

z-index 安静了，SqlHelper 淘汰了，BeginInvoke 没人用了。它们不是一个一个被干掉的，是工具链整个升级了。从手动挡变成了自动挡。

五、收尾

偶尔在代码里看到 z-index 这个词，会想起以前调到崩溃的下午。

不是因为那时候好，是因为那时候所有东西都要自己来。现在很多东西被框架和标准接过去了，你只需要告诉它要什么，不用管它怎么做。

挺好的。