为什么“position: relative”会干扰“transform: scale”？

Question

为什么“position: relative”会干扰“transform: scale”？

5

给定以下的标记和样式

div {
  width: 300px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all .1s ease-in-out;
  background-color: white;
  padding: 0px 5px;
}
div:hover {
  transform: scale(1.2);
}
label {
  /*position: relative;*/
}

<div>
  <label>some random text</label>
</div>
<div>
  <label>some random text</label>
</div>

当鼠标悬停在第一个

元素上时，第二个

元素中的一些字母会被缩放的元素“隐藏”。然而，当在元素上设置了“position: relative”时，文本就会被渲染在缩放的元素上方：

div {
  width: 300px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all .1s ease-in-out;
  background-color: white;
  padding: 0px 5px;
}
div:hover {
  transform: scale(1.2);
}
label {
  position: relative;
}

<div>
  <label>some random text</label>
</div>
<div>
  <label>some random text</label>
</div>

我正在尝试理解这背后的原因。既然在所有浏览器中都表现一致，那么我想它应该在规范中有定义。如果是这样的话，它的合理性是什么？如果不能触摸相对定位，我该如何“关闭”它呢？

- Andrei V

1

嗯...它并没有真正地干扰。你看到的是一个z-index堆叠问题。你的label具有除静态位置之外的位置，这会隐式地改变渲染方式，使其“置于顶部”其他元素，包括包含的div。 - Joseph Marikle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

应用变换到一个元素会导致它建立一个新的堆叠上下文。

定位一个元素（例如将其position设置为除static以外的其他值）不一定会导致它建立一个堆叠上下文，特别是当一个相对定位的元素具有z-index:auto（默认值）时，它不会建立一个堆叠上下文。

话虽如此，这两种类型的元素在CSS2.1第9.9节定义的绘制顺序中被分成一组：

在每个堆叠上下文中，以下层按从后往前的顺序绘制：

形成堆叠上下文的元素的背景和边框。
具有负堆叠级别的子堆叠上下文（最负面的先绘制）。
流动的、非内联级、非定位的后代。
非定位的浮动元素。
流动的、内联级、非定位的后代，包括内联表格和内联块。
堆叠级别为0的子堆叠上下文和堆叠级别为0的定位后代。
具有正堆叠级别的子堆叠上下文（最正面的先绘制）。

当你悬停在第一个div上时，它变成了一个堆叠级别为0的子堆叠上下文，但是这个子堆叠上下文与第二个div中的label一起参与同一个父堆叠上下文，因为第二个div本身没有建立一个堆叠上下文。

由于所有元素都具有相同的堆叠级别0（基于默认的z-index:auto），规范说：

在堆叠上下文中具有相同堆叠级别的框按照文档树顺序从后往前堆叠。

由于第一个div出现在第二个div和它的label之前，所以第二个div的label尽管应用了变换，仍然会覆盖第一个div。

你可以通过在div:hover上指定z-index:1来解决这个问题。

div {
  width: 300px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all .1s ease-in-out;
  background-color: white;
  padding: 0px 5px;
}
div:hover {
  transform: scale(1.2);
  z-index: 1;
}
label {
  position: relative;
}

<div>
  <label>some random text</label>
</div>
<div>
  <label>some random text</label>
</div>