如何隐藏位置:使用翻译时的相对位置

Question

似乎使用transform: translateY(1px);也会导致元素获得额外的position: relative;行为.

有没有办法来阻止这个？

这是codepen.io上的一个例子.

我想将白盒绝对放在绿色盒子上,而不是父盒子(红色).

Answer 1

一种选择是通过环绕一个元素来替换/否定父级的定位#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，并且父元素#two的平移定位被有效地移位。

更新的示例

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