绝对定位始终低于父母的兄弟姐妹

Question

我正在尝试将动画可视化。我有一个奇怪的问题，绝对定位不会使我的div成为最重要的。 我只需要一个容器，一系列div和一个孩子。

<div id="outer">
  <div class="inner1"> <!-- this is relative -->
    <div class="inner2"></div> <!-- this is absolute with z-index 1000  (1)-->
  </div>
  <div class="inner1"> <!-- this is relative (2) -->
    <div class="inner2"></div> <!-- this is absolute -->
  </div>
</div>

为什么(2)位于(1)

之下

请检查小提琴以了解我的问题。

http://jsfiddle.net/MSpVM/2/

Answer 1

就我从你的小提琴中看到的那样，你实际上没有.inner2绝对定位，而你现在正在使用左边距移动它。

如果您将position: absolute添加到.inner2的CSS规则中，这似乎可以解决问题。

您可能也有兴趣阅读有关CSS transition/transform performance的文章（我注意到您使用CSS来转换.inner2元素）