css – 如何隐藏位置：使用translate时的相对位置

似乎使用transform：translateY(1px);也导致元素获得额外的位置：相对; – 行为.

有没有办法来阻止这个？

这是一个例子on codepen.io.

我想将白盒绝对定位到绿色盒子,而不是父盒子(红色).

解决方法

一种选择是通过在#three周围包裹一个元素来取代/否定父级的定位(在这种情况下,我添加了.displacement元素).

绝对定位此包装元素,并将其定位为覆盖父元素(使用top：0 / right：0 / bottom：0 / left：0).然后通过给出相对于父元素的负翻译值来替换元素.

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

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}

在这样做时,元素#three绝对相对于#one定位,并且父#2的翻译定位被有效地移位.

Updated Example

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}
#three {
  background-color: white;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
}