您现在的位置是：网站首页 > z-index的工作原理文章详情

z-index的工作原理

陈川【 CSS 】 42322人已围观 5480字

z-index的基本概念

z-index是CSS中控制元素堆叠顺序的属性。它决定了元素在垂直于屏幕方向（Z轴）上的显示顺序。当多个元素重叠时，z-index值较大的元素会覆盖值较小的元素。这个属性只对定位元素（position值不是static的元素）有效。

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  background: red;
  z-index: 1;
}
.box2 {
  background: blue;
  left: 100px;
  top: 100px;
  z-index: 2;
}

z-index的取值特性

z-index可以接受以下类型的值：

整数（正数、负数或0）
auto（默认值，相当于0）

z-index的值可以是任意整数，没有上限或下限限制。现代浏览器通常支持32位有符号整数范围（-2147483648到2147483647）。当多个元素具有相同的z-index值时，它们在DOM中的顺序决定了堆叠顺序，后出现的元素会覆盖先出现的元素。

/* 有效的z-index值示例 */
.element1 {
  z-index: 10;
}
.element2 {
  z-index: -1;
}
.element3 {
  z-index: 0;
}

堆叠上下文的概念

z-index的实际效果受到堆叠上下文（stacking context）的制约。堆叠上下文是HTML元素的三维概念，它决定了子元素的z-index相对于该上下文的比较范围。以下情况会创建新的堆叠上下文：

根元素（HTML）
position为absolute或relative且z-index不为auto的元素
position为fixed或sticky的元素
flex容器的子项且z-index不为auto
opacity值小于1的元素
transform值不为none的元素
其他CSS属性如filter、perspective、clip-path等

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>
<div class="sibling">Sibling</div>

.parent {
  position: relative;
  z-index: 1; /* 创建新的堆叠上下文 */
}
.child1 {
  position: absolute;
  z-index: 100;
}
.child2 {
  position: absolute;
  z-index: 50;
}
.sibling {
  position: relative;
  z-index: 2; /* 虽然值比child1小，但因为parent的上下文，会显示在parent上方 */
}

z-index的层叠规则

浏览器按照以下顺序决定元素的堆叠顺序（从下到上）：

形成堆叠上下文的元素的背景和边框
z-index为负的子堆叠上下文
常规流中的非定位块级元素
非定位浮动元素
常规流中的非定位行内元素
z-index为auto或0的定位元素
z-index为正的子堆叠上下文

<div class="container">
  <div class="box background">Background</div>
  <div class="box negative">Negative z-index</div>
  <div class="box block">Block level</div>
  <div class="box float">Float</div>
  <div class="box inline">Inline</div>
  <div class="box positioned">Positioned (z-index: auto)</div>
  <div class="box positive">Positive z-index</div>
</div>

.container {
  position: relative;
}
.box {
  position: absolute;
  width: 200px;
  height: 50px;
}
.background {
  z-index: -1;
  background: #ccc;
}
.negative {
  z-index: -1;
  top: 20px;
  background: #f99;
}
.block {
  position: static;
  background: #9f9;
}
.float {
  float: left;
  background: #99f;
}
.inline {
  display: inline;
  background: #ff9;
}
.positioned {
  z-index: auto;
  top: 40px;
  background: #f9f;
}
.positive {
  z-index: 1;
  top: 60px;
  background: #9ff;
}

常见问题与解决方案

问题1：z-index不生效 通常是因为元素没有设置position属性或值为static。解决方案是设置position为relative、absolute、fixed或sticky。

/* 不生效 */
.not-working {
  z-index: 10; /* 无效，因为position是默认的static */
}

/* 生效 */
.working {
  position: relative;
  z-index: 10;
}

问题2：父元素限制了子元素的z-index 当父元素创建了堆叠上下文，子元素的z-index只在该上下文中有效。

<div class="parent">
  <div class="child">我在parent的堆叠上下文中</div>
</div>
<div class="other">其他元素</div>

.parent {
  position: relative;
  z-index: 1;
}
.child {
  position: absolute;
  z-index: 100; /* 只在parent的上下文中有效 */
}
.other {
  position: relative;
  z-index: 2; /* 会显示在parent上方，尽管child的z-index更大 */
}

问题3：动态添加元素时的z-index管理 在单页应用中，动态添加的模态框或弹出层需要确保显示在最上层。

// 确保新元素获得最高z-index
function getMaxZIndex() {
  return Math.max(
    ...Array.from(document.querySelectorAll('body *'))
      .map(el => parseFloat(window.getComputedStyle(el).zIndex))
      .filter(zIndex => !isNaN(zIndex)),
    0
  );
}

const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.zIndex = getMaxZIndex() + 1;
document.body.appendChild(modal);

高级应用场景

场景1：多层嵌套的z-index管理 在复杂布局中，合理规划z-index的取值区间可以避免混乱。

/* 基础层 */
.base-layer {
  z-index: 100;
}

/* 内容层 */
.content {
  z-index: 200;
}

/* 浮动元素 */
.floating {
  z-index: 300;
}

/* 模态框 */
.modal {
  z-index: 1000;
}

/* 通知提示 */
.notification {
  z-index: 1100;
}

/* 加载层 */
.loader {
  z-index: 1200;
}

场景2：CSS框架中的z-index策略 Bootstrap等框架定义了z-index的层级系统：

:root {
  --zindex-dropdown: 1000;
  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-modal-backdrop: 1040;
  --zindex-modal: 1050;
  --zindex-popover: 1060;
  --zindex-tooltip: 1070;
}

场景3：3D变换与z-index 当使用transform时，会创建新的堆叠上下文，可能影响z-index的表现。

<div class="parent">
  <div class="transformed">Transformed</div>
  <div class="normal">Normal</div>
</div>

.parent {
  position: relative;
}
.transformed {
  position: absolute;
  transform: translateZ(0); /* 创建新的堆叠上下文 */
  z-index: 1;
  background: red;
}
.normal {
  position: absolute;
  z-index: 2; /* 虽然值更大，但可能被transformed遮挡 */
  background: blue;
}

浏览器兼容性注意事项

不同浏览器对z-index的实现有一些细微差别：

早期IE版本（6/7）的z-index实现有缺陷，会从父元素继承z-index值
某些移动浏览器对极大或极小的z-index值支持不佳
Safari在某些版本中对flex项和grid项的z-index处理不一致

针对IE的hack方法：

.element {
  position: relative;
  z-index: 10;
  /* IE6/7需要设置更高的z-index */
  *z-index: 20;
}

性能考量

虽然z-index本身对性能影响很小，但以下几点值得注意：

过度使用高z-index值可能导致渲染层复合，影响性能
频繁修改z-index会触发重排和重绘
在动画中使用z-index变化比使用transform性能更低

优化建议：

/* 优先使用transform而不是z-index来实现视觉层次 */
.optimized {
  transform: translate3d(0, 0, 10px); /* 使用3D变换代替z-index */
}

实际开发中的最佳实践

建立z-index的命名规范和取值系统
使用CSS变量或预处理器管理z-index值
为不同功能区域划分z-index范围
避免使用极端大的z-index值
文档化z-index的使用规范

Sass示例：

$z-index: (
  modal: 1000,
  dropdown: 900,
  tooltip: 800,
  overlay: 700,
  default: 1,
  below: -1
);

.modal {
  z-index: map-get($z-index, modal);
}

上一篇：定位布局的几种方式

下一篇：盒阴影与轮廓的使用