似乎使用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的翻译定位被有效地移位.
.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;
}
