0

Chrome が相対配置された div の上に絶対配置された要素を表示する方法の違いを見つけました

ここにいくつかのマークアップがあります：

<div id="maincontent">
<table id="mainTable">
   <tr class="menuRow">
       <td >
            <div id="menu">
                <ul id="panel">
                    <li>Option 1</li>                                     
                    <li>Option 2</li>                                     
                    <li>Option 3</li>                                     
                </ul>    
            </div>
     </td>
    </tr>
    <tr>
        <td class="contentRow">
            <div id="content" >

            </div>
       </td>
    </tr>
</table>

CSS:

#maincontent { width: 100%; }
#mainTable { width: 100%; }
#menu { position: fixed; background-color: green; 
width: 30px; height: 30px; cursor:     pointer; }
#panel{ position: absolute; height: 150px; width: 100px;
 background-color: red;     display:none; z-index:10; }
#content { margin-top: 30px; height: 300px; width:300px;
 background-color: #00F; position:relative;}​

私の問題を示すサンプルをここにまとめました。(緑色のボックスの上にマウスを移動すると、赤い「メニュー」が表示されます)

IE と Firefox では、青いコンテンツの上に正しく表示されます。Chrome では、コンテンツの背後に「メニュー」が表示されます。これをChromeで機能させる方法はありますか?

どうもありがとうございました。フィードバックは大歓迎です。

4

4 に答える 4

1

うん、z-indexを上げて#menu：

#menu { 
    position: fixed; 
    background-color: green; 
    width: 30px; 
    height: 30px; 
    cursor: pointer; 
    z-index: 9999;
 }

http://jsfiddle.net/Ezn4v/

于 2012-10-24T18:03:30.357 に答える
1
于 2012-10-24T18:05:06.207 に答える
1

親のz-indexを設定する必要があります

#menu {z-index:11 };

フィドルをチェック

于 2012-10-24T18:05:38.697 に答える
1

z-index をメニューに追加するだけで、誰にとっても正しく機能します。

#menu {z-index:2; position: fixed; background-color: green; width: 30px; height: 30px; cursor:

http://jsfiddle.net/sU66E/2/

于 2012-10-24T18:06:32.647 に答える