css - 绝对定位总是在父母的兄弟姐妹之下

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到 CSS 规则中.inner2这似乎可以解决问题。

你可能也有兴趣阅读这篇关于CSS 转换/转换性能的文章（我注意到你使用 CSS 来转换.inner2元素）