结合翻译和位置绝对问题

Question

我想在.child的右下角放置.parent给出以下html：

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

到目前为止这很简单，但问题是我需要translate .moved元素

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

现在，.child的所有定位都与.moved相关。

DEMO

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

Answer 1

不，因为transform（值不同于none）会创建新的stacking context，因此.child位置现在与.moved相关联元素，但你可以使用负边距，例如margin: -10px 0 0 -10px;

示例：http://jsfiddle.net/o6hsknnw/

最终结果在视觉上与使用transform: translate3d(-10px, -10px, 0);相同（无论如何，此图层不再提升为GPU）