Css 使用translate时如何悬空位置：relative

似乎使用

transform:translateY（1px）还会使元素获得额外的
位置：相对-行为

有没有办法怀疑这一点

这里有一个例子

我希望将白盒绝对定位为绿色，而不是父（红色）白盒。
一个选项是通过在
#三个
（在本例中，我添加了
.displacement
元素）周围环绕一个元素来置换/否定父位置

绝对定位此包装器元素，并将其定位为覆盖父元素（使用
顶部：0
/
右侧：0
/
底部：0
/
左侧：0
）。然后通过相对于父元素的负平移值替换元素

<div class="displacement">
    <div id="three"></div>
</div>

这样做时，元素
#three
相对于
#one
绝对定位，并且父元素
#two
的转换定位被有效地置换


position:absolute
请勿为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的框可以有边距，它们不会与任何其他边距一起折叠

因此，在您的例子中，最近的祖先总是
#two
，它不继承任何位置属性，只是默认的
位置：static


如果您给出了两个
位置：相对//或绝对
，并将其放置在
顶部：
和
左侧：
可能更容易放置#三个：
这里有一个不太理想的解决方法，但它适用于现有的标记

将
#two
CSS更改为伪元素，添加以下样式：

#two::before {
  content: '';
  display: block;
}



除了更改标记之外，您的另一个解决方案是使用JavaScript将
three
作为元素
one
的子元素：

document.querySelector('#one').appendChild(document.querySelector('#three'));

但是，它将不再从元素
two
继承任何样式，如本文所示

下面是一篇有趣的文章，它证实了“变换元素力会增加位置：相对”

不仅如此，它还影响固定位置元素，这没有多大意义。
谢谢您的回答！这确实解决了这个问题。但是如果你不知道所有的维度，它就不会起作用。。假设#三应该是`左：0'和`右：0'。这没用，是吗？@Gundon我找到了一个解决办法实际上。。。好主意！介意分享一下吗？然后我将其打勾作为回答（：你读错了。包含的块是回退，而不是优先级检查。当从#2删除转换时，你也可以看到这一点。然后#3将定位为#1。我确定两个有位置：静态，因为我检查了开发工具（也可以检查添加一个属性，如left:33px->它没有反应），因为#3嵌套在#2中，这就是绝对定位的计算依据
#two::before {
  content: '';
  display: block;
}

document.querySelector('#one').appendChild(document.querySelector('#three'));