您现在的位置是：网站首页 > z-index的层叠规则文章详情

z-index的层叠规则

陈川【 CSS 】 6227人已围观 3517字

z-index是CSS中控制元素层叠顺序的关键属性，理解其规则对于解决页面元素遮挡问题至关重要。层叠上下文、层叠等级和层叠顺序共同决定了元素的最终显示效果。

z-index的基本概念

z-index属性用于指定一个定位元素及其子元素的层叠顺序。它接受整数值（正负均可）或auto关键字。默认情况下，所有元素的z-index值为auto，此时元素的层叠顺序由其在DOM树中的位置决定。

<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值更高。

层叠上下文的形成

z-index只在特定条件下生效，这些条件会创建新的层叠上下文：

根元素（HTML）
position值为absolute/relative且z-index不为auto
position值为fixed/sticky
flex容器的子项且z-index不为auto
opacity值小于1
transform值不为none
filter值不为none
will-change指定了特定属性

.parent {
  position: relative;
  z-index: 0; /* 创建层叠上下文 */
}
.child {
  position: absolute;
  z-index: 100; /* 只在父级层叠上下文中生效 */
}

层叠顺序规则

当元素处于同一层叠上下文时，按照以下顺序从后到前排列：

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

<div class="stacking-context">
  <div class="negative">z-index: -1</div>
  <div class="static">static</div>
  <div class="float">float</div>
  <div class="inline">inline</div>
  <div class="auto">z-index: auto</div>
  <div class="positive">z-index: 1</div>
</div>

z-index的继承性

z-index不会继承给子元素。子元素的z-index值只在当前层叠上下文中有效。

.parent {
  position: relative;
  z-index: 10;
}
.child {
  position: absolute;
  z-index: 5; /* 不是相对于全局的5，而是在父级上下文中的5 */
}

常见问题与解决方案

1. z-index不生效

通常是因为元素没有设置position属性或值为static。只有position值为relative/absolute/fixed/sticky时，z-index才会生效。

/* 不生效 */
.not-working {
  z-index: 100;
  position: static;
}

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

2. 跨层叠上下文的z-index比较

不同层叠上下文中的z-index值不能直接比较。子元素的z-index再大也无法超越父级层叠上下文的限制。

<div class="ctx1" style="position:relative; z-index:1">
  <div style="position:absolute; z-index:1000"></div>
</div>
<div class="ctx2" style="position:relative; z-index:2">
  <div style="position:absolute; z-index:1"></div>
</div>

在这个例子中，ctx2中的z-index:1元素会覆盖ctx1中的z-index:1000元素，因为ctx2的层叠上下文层级更高。

3. 动态修改z-index

通过JavaScript动态修改z-index可以创建交互效果：

document.querySelector('.modal').addEventListener('click', function() {
  this.style.zIndex = '1000';
});

实际应用案例

模态框实现

<div class="overlay"></div>
<div class="modal">
  <button class="close">×</button>
  <h2>Modal Title</h2>
  <p>Modal content...</p>
</div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 101;
}

多级菜单

<nav class="menu">
  <ul>
    <li>
      <a href="#">Item 1</a>
      <ul class="submenu">
        <li><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

.menu ul {
  position: relative;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
}
.menu li:hover .submenu {
  display: block;
}