结合翻译和定位绝对问题

Question

鉴于以下 html：

，我想将 .child 放置在 .parent 的右下角

<div class="parent">
   <div class="moved">
       <span class="child">Hi</span>
   </div>
</div>

到目前为止很容易，但我遇到的问题是我也需要 translate .moved 元素

transform: translate3d(-10px, -10px, 0);

现在，.child 的所有定位都是相对于 .moved 的。

所以问题是在这种情况下是否可以相对于 .parent 定位 .child？

Answer 1

否，因为 transform（与 none 的值不同）创建了一个新的 stacking context，所以 .child 位置现在与 [=13] 相关=] 元素，但您可以改用负边距，例如margin: -10px 0 0 -10px;

最终结果在视觉上与使用transform: translate3d(-10px, -10px, 0);相同（反正这一层不再提升到GPU）

combine translate and position absolute issue