css - tricks - z-index que es

Problema IE7 Z-Index-Menú contextual

Question

Tengo el siguiente botón con el menú contextual asociado

    <div class="control-action"> 
        <button>Action</button> 
        <ul style="display:none">
            <li class="action-remove">Remove</li>
            <li class="action-detail">Detail</li>
            <li class="action-assigned">Assign</li>
        </ul>
    </div> 

Cuando se hace clic en el botón, el ul asociado aparece debajo de él como un menú contextual.

Esto funciona muy bien en todos los navegadores, excepto en IE 7. En IE7, el menú contextual (ul) se muestra debajo del botón debajo de él. Me imagino que esto se debe probablemente a cómo el contexto de apilamiento está resolviendo estos elementos.

Mi css actualmente se ve así:

.control-action
{
    position: relative;
    text-align:right;
    width:100px;    
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

¿Alguna idea de lo que estoy haciendo mal?

Answer 1

IE hasta IE7 usa el ancestro posicionado más cercano para determinar el contexto de apilamiento. ¿Lo ves en IE6 también?

Pon tu botón después de la UL y luego pruébalo.

Answer 2

Lo resolví cambiando el orden de los elementos. He eliminado el elemento de posición relativa para que contenga tanto mi botón como mi menú y lo haya convertido solo en el elemento principal del menú.

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div> 

Con este cambio de marcado el CSS ha cambiado a lo siguiente:

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

Answer 3

IE7 ha conocido errores con z-index .

Sin ver tu página completa, lo mejor que puedo hacer es señalarte algunos recursos que explican el problema:

• IE 6 y IE 7 Z-Index Problema
• Problemas de IE7 Z-Index Layering
• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

La idea, en su forma más básica, es probar la posición de adición / eliminación position: relative e z-index en los padres del elemento problemático hasta que se solucione.

Answer 4

Podría ser el error hasLayout .

Esto puede ayudar: error de posicionamiento relativo / absoluto IE7 con contenido de página modificado dinámicamente