Chrome：親が固定されているときに絶対divを別の位置に配置することはできません

Question

divの親が上になりたいときに絶対配置されたdivを別の場所に配置できないことがわかりました固定：

<div id="parent"> 
    <div id="top"></div> 
</div> 
<div id="bottom"></div> 

は、ここで問題を実証JSFiddleです：

http://jsfiddle.net/SEJhg/

あなたは10が表示さzの緑の絶対配置のdivの背後にあるZインデックスと黄色の絶対配置のdivにChromeでそれを見るべきです-index：1、beca親の固定位置の使用。

Firefoxのような他のブラウザでは、緑の上に黄色のdivが表示されます。

Chromeでこれを解決する方法についてのご意見はありますか？私は親の固定位置を変更することができません。

ありがとうございます！唯一のクロムのための

Answer 1

あなたが経験している何モバイルブラウザとデスクトップブラウザの挙動を揃えるために導入され、Chromeの比較的新しい動作です。

#parentのような要素がposition: fixed;の場合、その要素に新しいスタッキングコンテキストが作成されます。これは、要素とその子が相対的にウィンドウのコンテキストではなく相対的に積み重なることを意味します。したがって、固定要素（#bottom）の子ではない要素は、#parentと#topの間に配置することはできません。

あなたのソリューションは、#parent内部#bottom（同じスタッキングコンテキストにそれを置く）を移動、または固定以外の何かに#parentの位置決め方法を変更するのいずれかになります。

Chromeでこの変更のための提案はここで見つけることができます：http://lists.w3.org/Archives/Public/www-style/2012May/0473.html

Answer 2

CTHE位置：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
#parent { 
    position: absolute; 
    } 
} 

は、すべてのブラウザでhttp://jsfiddle.net/5fKq6/を参照してください。

Answer 3

私はこれを耳にしていましたが、私がやって来た結論は、クロムではparentとtop要素が不可能であるということです。私がこの結論に至ろうとしたのは、bottom要素をparent "サンドウィッチ"の上に置き、z-インデックスで手を加えていたことです。 bottomをサンドイッチの上または下に表示できますが、直接は表示されません。私のために仕事をした何

は、このでした：これはあなたのために役に立たない回答かもしれので

<div id="parent"> 
    <div id="bottom"></div> 
    <div id="top"></div> 
</div> 

私はあなたのページの内容を知らないが、私はこれをやって、その後に位置を調整することを考えますあなたが望んでいたように、外側からサンドイッチの要素を滑らせようとするよりも、ページのx軸とy軸で望ましい結果を得るのが簡単になります。

Answer 4

このコードを試してみてください。

<div id="parent"> 
<div id="bottom"></div> 

</div>

<div id="top"></div> 

Answer 5

私はChromeバージョンを使用しています：21.0.1180.89 m、及び黄色は緑の上方に位置しています。