要素はどのようにして親の後ろに位置することができますが、祖父母の前にいますか？

Question

私は3つの要素を積み重ねています。今では、最も内側の要素を親の後ろに置いて、祖父母の前に置いておきたいと思います。私はz-indexの設定にさまざまなバリエーションを試しましたが、成功はありませんでした。

Zインデックスの私の理解として働くshoulコードは次のとおりです。それがないことを除いて

<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;"> 
    <div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;"> 
     <div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div> 
    </div> 
</div> 

。

Answer 1

それは動作します

CSS

.div1{ 
    width: 400px; 
    height: 400px; 
    background-color: purple; 
    position: relative; 
    z-index: 1; 
} 

.div2{ 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
    z-index: 1; 
} 

.div3{ 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    position: relative; 
    z-index: -1; 
    left:150px; 
} 

HTML

<div class='div1'> 
    <div class='div2'> 
     <div class='div3'></div> 
    </div> 
</div> 

例：http://jsfiddle.net/MFULL/90/

Answer 2

要素がページフローの一部である限り、親を子の前に置くことはできません。

このように積み重ねることができるようにするには、ページフローから要素を取り除くために絶対配置を使用する必要があります。

Answer 3

あなたのような意味場合：

<div id="a"> 
    <div id="b"> 
     <div id="c"> 
     </div> 
    </div> 
</div> 

その後、あなたは次のメソッドを使用することができます。

デモ：http://jsfiddle.net/ZmvKX/

#a { 
    width: 300px; height: 300px; border: 1px solid black; background-color: #000; 
    z-index: -1; position: absolute; 
} 

#b { 
    width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0; 
    position: relative; 
} 

#c { 
    width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff; 
    position: absolute; z-index: -2; 
} 

トリックはスタッキングコンテキストが権利を取得することです。あなたは第二のdivからの相対位置を削除した場合