абсолютный позиционированный элемент над относительным позиционированным div в Chrome

Я обнаружил разницу в том, как 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?

Большое спасибо, любые отзывы приветствуются.


html jquery css css-position
person svillamayor    schedule 24.10.2012    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Ага, вверх по z-индексу на #menu:

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

http://jsfiddle.net/Ezn4v/

person Fluidbyte    schedule 24.10.2012

arrow_upward
1
arrow_downward

Уменьшите индекс синего содержимого div:

#content { margin-top: 30px; height: 300px; width:300px; background-color: #00F; position:relative; z-index: -1;}​

Или поднять индекс своего меню:

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

person Jeff Wilbert    schedule 24.10.2012
comment
Затем синяя рамка помещается за самой страницей, так что это не сработает. - person Dylan Cross; 24.10.2012
comment
z-index юридически не допускает отрицательных значений - person Luca; 24.10.2012

arrow_upward
1
arrow_downward

Вам необходимо установить z-index для родительского

#menu {z-index:11 };

Проверить скрипт

person Sushanth --    schedule 24.10.2012

arrow_upward
1
arrow_downward

Просто добавьте в меню z-index, и он будет работать корректно для всех.

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

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

person Louis Ricci    schedule 24.10.2012