6

最上位にしたいdivの親が修正されている場合、Chromeで絶対位置にあるdivを別のdivの上に配置できないことがわかりました。

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

これが問題を示すJSFiddleです：

http://jsfiddle.net/SEJhg/

Chromeでは、親の位置が固定されているため、z-index10の黄色の絶対位置のdivがz-index：1の緑色の絶対位置のdivの後ろに表示されることがわかります。

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

Chromeでこれを修正する方法について何か提案はありますか？親の固定位置を変更できません。

ありがとう！

4

5 に答える 5

10

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

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

#bottom解決策は、内部を移動する#parent（同じスタッキングコンテキストに配置する）か、の配置方法を#parent固定以外のものに変更することです。

Chromeでのこの変更の提案は、次の場所にあります：http: //lists.w3.org/Archives/Public/www-style/2012May/0473.html

于 2012-12-10T10:53:34.327 に答える
3

私はこれをいじくり回しました、そして私が到達した結論は、クロムでは要素parentとtop要素が不可分であるということです。私がこの結論に到達しようとしたのは、bottom要素をparent「サンドイッチ」の上に置き、z-indexをいじることでした。サンドイッチの上または下に表示することはできbottomますが、サンドイッチに直接表示することはできません。

私のために働いたのはこれでした：

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

あなたのページのコンテキストがわからないので、これはあなたにとって役に立たない応答かもしれませんが、これを行ってから、ページのx軸とy軸で目的の結果が得られるように位置を調整する方が簡単だと思いますあなたが望んでいたように、サンドイッチの要素を外側から滑らせます。

于 2012-12-10T10:22:11.427 に答える
0

クロムのみの位置：

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

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

于 2012-12-10T10:08:34.800 に答える
0

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

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

</div>

<div id="top"></div>
于 2012-12-10T10:52:40.343 に答える
0

Chromeバージョン21.0.1180.89mを使用しており、黄色は緑の上に配置されています。

于 2012-12-10T10:56:42.537 に答える