css - 常に親の兄弟の下に絶対配置

Question

私はアニメーションを視覚化しようとしています。絶対配置でdivが一番上にならないという奇妙な問題がありました。単純に、コンテナと一連の div と、それぞれに 1 つの子があります。

<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要素をトランジションしていることに気付きました)。