Question

给出以下标记和样式

＆＃13;

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;*/
}

＆＃13;

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

＆＃13;

当鼠标悬停在第一个div上时，来自第二个div的某些字母正在隐藏＆＃34;在缩放元素下。但是，如果在position: relative元素上设置label，则会在缩放元素上呈现文本：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我试图了解这背后的原因。由于这种接缝在浏览器中保持一致，我认为它是在规范中定义的。如果是这样，那么基本原理是什么？如果不能触及相对定位，我该如何关闭它呢？

Answer 1

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

定位元素（即将其position设置为static以外的其他内容）并不一定会导致它建立堆叠上下文，特别是具有z-index: auto的相对定位元素（默认情况下）不会建立堆叠上下文。

话虽如此，两种类型的元素都按照section 9.9 of CSS2.1中定义的绘画顺序组合在一起：

在每个堆叠上下文中，以下按顺序绘制以下图层：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

当您将第一个div悬停时，它将成为堆叠级别为0的子堆叠上下文，但此子堆叠上下文与第二个{{1}中的label一起参与相同的父堆叠上下文因为第二个div本身不会建立堆叠上下文。

由于所有元素的堆栈级别均为0（基于默认的div），因此规范说明：

堆叠上下文中具有相同堆栈级别的框根据文档树顺序从前到后堆叠。

由于您的第一个z-index: auto发生在第二个div和其 div之前，第二个label的{{1}}是尽管有变化，但仍在第一个label上绘制。

您可以在div上指定div来解决此问题：

z-index: 1

div:hover

为什么＆＃34;位置：亲和＆＃34;干扰＆＃34;转换：规模＆＃34;？

1 个答案: