html - 为什么 "position: relative"会干扰 "transform: scale"？

Question

给定以下标记和样式

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>

当鼠标悬停在第一个 div 上时，第二个 div 中的一些字母被“隐藏”在缩放元素下。但是，当 position: relative 设置在 label 元素上时，文本将呈现在缩放元素上:

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>

我正在尝试理解这背后的原因。由于这种接缝跨浏览器是一致的，我认为它是在规范中定义的。如果是这样，理由是什么？如果无法触摸相对定位，我该如何“关闭它”？

Answer 1

对元素应用转换会导致它建立新的堆叠上下文。

定位元素(即将其 position 设置为 static 以外的值)不一定会导致它建立堆叠上下文，特别是相对定位的元素 z-index: auto (默认)不建立堆栈上下文。

也就是说，这两种类型的元素都按照 section 9.9 of CSS2.1 中定义的绘制顺序组合在一起。 :

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

当您将鼠标悬停在第一个 div 上时，它成为堆栈级别为 0 的子堆栈上下文，但此子堆栈上下文参与与 label 相同的父堆栈上下文。在第二个 div作为第二个div本身不建立堆栈上下文。

由于您所有的元素都具有相同的堆栈级别 0(基于默认的 z-index: auto )，规范说:

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

自从您的第一个 div在第二个 div 之前发生和它的 label , label第二个div涂在第一个div尽管发生了转变。

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

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>