全面解读z-index不生效的幕后推手——transform

2024-01-20 02:56:55

在网页设计中，z-index属性是一个用于控制元素层叠顺序的重要CSS属性。当多个元素重叠时，z-index决定了哪个元素位于最上方。一般来说，z-index值较大的元素会覆盖z-index值较小的元素。

然而，在某些情况下，我们会发现z-index似乎不起作用，明明将某个元素的z-index值设置得很大，但它却没有出现在最上方。这通常是由于transform属性造成的。

transform属性允许我们对元素进行平移、旋转、缩放和倾斜等操作。当对元素应用transform属性时，它就会脱离正常的文档流，进入一个隔离的层级，称为“变形上下文”。在变形上下文中，z-index属性不再起作用，元素的层叠顺序由变形属性决定。

因此，如果我们想让一个元素始终位于最上方，就需要避免对它应用transform属性。如果确实需要对该元素应用transform属性，那么我们需要将其父元素的position属性设置为relative或absolute，这样该元素就会脱离文档流，进入父元素的变形上下文，此时z-index属性才会起作用。

以下是几个实际案例，来说明transform属性是如何影响z-index的：

案例一：

<div id="parent">
  <div id="child">子元素</div>
</div>

#parent {
  position: relative;
  z-index: 1;
}

#child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

在这种情况下，子元素会出现在父元素的上面，因为子元素的z-index值比父元素的z-index值大。

案例二：

<div id="parent">
  <div id="child">子元素</div>
</div>

#parent {
  position: relative;
  z-index: 1;
}

#child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translate(0, 100px);
}

在这种情况下，子元素不会出现在父元素的上面，因为子元素应用了transform属性，导致它脱离了文档流，进入了一个隔离的层级。因此，z-index属性不再起作用，子元素的层叠顺序由变形属性决定。

案例三：

<div id="parent">
  <div id="child">子元素</div>
</div>

#parent {
  position: relative;
  z-index: 1;
}

#child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translate(0, 100px);
}

#parent {
  transform: translate(0, 100px);
}