CSS z-index被设置为transform(rotate)所取消

在本文中，我们将介绍CSS（层叠样式表）中的z-index属性和transform(rotate)属性的相互作用。我们将详细探讨z-index属性和transform(rotate)属性的用法以及它们在页面布局中的影响。

阅读更多：CSS 教程

什么是z-index属性？

z-index属性是CSS中用于控制元素在层叠上下文中的垂直叠放顺序的属性。通过设置z-index的值，我们可以改变元素的层叠顺序，从而决定元素在页面中的显示顺序。

默认情况下，元素的z-index值为auto，这意味着它们根据它们在HTML文档中的出现顺序进行叠放。较大的z-index值表示元素在堆叠上下文中更接近顶部的位置。

z-index属性只对定位元素（position属性值为relative、absolute或fixed）起作用，对于其他非定位元素无效。

以下是一个示例，展示了如何使用z-index属性控制元素的层叠顺序：

.container {
  position: relative;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1;
}

.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
}

在上面的例子中，一个容器元素（class为.container）使用了相对定位。两个子元素（class为.box和.box2）使用了绝对定位，并设置了不同的背景颜色和z-index值。.box2的z-index值较大，因此它显示在.box之上。这样，我们可以通过z-index属性调整元素的层叠顺序。

什么是transform(rotate)属性？

transform(rotate)是CSS中的一个变换属性，用于旋转元素。通过设置transform(rotate)的值，我们可以按照一定的角度旋转元素。

以下是一个示例，展示了如何使用transform(rotate)属性旋转元素：

.box {
  transform: rotate(45deg);
}

上面的例子中，.box元素通过设置transform(rotate)属性的值为45度，被旋转了45度。transform(rotate)属性可以通过设置不同的旋转角度来实现各种旋转效果。

z-index与transform(rotate)的相互作用

在通常的情况下，z-index和transform(rotate)是独立的属性，它们之间并无直接的关联。z-index用于控制元素的层叠顺序，而transform(rotate)用于旋转元素。然而，在一些特殊情况下，z-index可能会受到transform(rotate)的影响。

当我们对一个元素使用了transform(rotate)属性时，浏览器会创建一个新的层叠上下文。这个新的层叠上下文会影响元素的z-index属性的表现。

以下是一个示例，展示了z-index在使用transform(rotate)时可能被取消的情况：

.container {
  position: relative;
  z-index: 2;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1;
}

在上面的例子中，一个容器元素（class为.container）使用了相对定位，并设置了较大的z-index值。两个子元素（class为.box和.class2）都使用了绝对定位，并分别设置了不同的背景颜色。.box元素使用了transform(rotate)属性进行旋转。

在这种情况下，由于.box元素使用了transform(rotate)属性，在浏览器中创建了一个新的层叠上下文。这个新的层叠上下文使得.box元素的z-index值失效，从而导致.box2元素显示在.box元素之上，尽管它的z-index值较小。

需要注意的是这种情况只在使用了transform(rotate)属性的元素上发生。其他的transform属性，如translate、scale和skew等，并不会影响z-index属性的表现。