css - tricks - Problemas de IE7 Z-Index Layering

z-index css

Question

He aislado un pequeño caso de prueba del error z-index de IE7, pero no sé cómo solucionarlo. He estado jugando con z-index todo el día.

¿Qué hay de malo con z-index en IE7?

Prueba de CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Prueba HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

Answer 1

"En IE, los elementos posicionados generan un nuevo contexto de apilamiento, comenzando con un valor de z-index de 0. Por lo tanto, el índice z no funciona correctamente".

Intente darle al elemento primario un valor de z-index más alto (puede ser incluso mayor que el valor z-index del niño) para corregir el error.

Answer 2

Descubrí que tenía que colocar una designación de índice Z especial en div en una hoja de estilo específica de ie7:

div {z-index: 10; }

Para el índice z de divs no relacionados, como un nav, para mostrar arriba del control deslizante. No podía simplemente agregar un índice z al deslizador div mismo.

Answer 3

En IE6 en general, ciertos elementos UI se implementan con controles nativos. Estos controles se representan en una fase completamente separada (¿ventana?) Y siempre aparecen encima de cualquier otro control, independientemente del índice z. Los cuadros de selección son otro control problemático.

La única forma de solucionar este problema es crear el contenido que IE representa como una "ventana" separada, es decir, puede colocar un cuadro de selección sobre un cuadro de texto o, más útilmente, un marco flotante.

En resumen, deberá colocar "on-hover" como elementos como un menú en un iframe para permitir que IE coloque estos controles de interfaz de usuario integrados anteriormente.

Esto debería haber sido arreglado en IE7 (ver http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) pero tal vez se está ejecutando en algún tipo de modo de compatibilidad?

Answer 4

Este error parece ser un problema aparte del error de IE de contexto de apilamiento separado estándar. Tuve un problema similar con varias entradas apiladas (esencialmente una tabla con un autocompletador en cada fila). La única solución que encontré fue dar a cada celda un valor de índice Z decreciente.

Answer 5

Lo resolví usando las herramientas de desarrollador para IE7 (es una barra de herramientas) y agregué un índice z negativo al contenedor del div que estará debajo de ese otro div.

Answer 6

Me encontré con este problema, pero en un proyecto grande donde los cambios de HTML tenían que solicitarse y se convirtió en un problema, así que estaba buscando una solución de CSS pura.

Al colocar la position:relative; z-index:-1 position:relative; z-index:-1 en el contenido de mi cuerpo principal, el contenido desplegable de mi encabezado se muestra de repente sobre el contenido del cuerpo en ie7 (ya se mostraba sin problema en todos los otros navegadores y en ie8 +)

El problema con esto era que deshabilitaba todas las acciones de desplazamiento y clic en todo el contenido del elemento con el z-index:-1 así que fui al elemento padre de toda la página y le di una position:relative; z-index:1 position:relative; z-index:1

Que solucionó el problema y conservaba la funcionalidad de estratificación correcta.

Se siente un poco hacky, pero funcionó según las necesidades.

Answer 7

Parece que no es un error, es decir, solo para una comprensión diferente del estándar css. Si el contenedor externo no se especifica, el índice z, pero el elemento interior especifica un índice z más alto. Entonces, el hermano del contenedor puede superponerse al elemento de alto índice z. Incluso así, solo ocurre en IE7, pero IE6, IE8 y Firefox están bien.

Answer 8

Si desea crear un menú desplegable y tener un problema con z-index, puede resolverlo creando índices z del mismo valor (z-index: 999, por ejemplo). Simplemente coloque el índice z en los elementos padre y secundarios y eso resolverá el problema Resuelvo el problema con eso. Si pongo diferentes índices z, seguro, mostrará mi div hijo sobre mi div principal, pero, una vez que quiera mover mi mouse desde la pestaña del menú al div del submenú (lista desplegable), desaparecerá ... entonces Pongo z-indexes del mismo valor y resuelvo el problema ..

Answer 9

Si la indexación z más alta mencionada anteriormente en los nodos principales no se adapta a sus necesidades, puede crear una solución alternativa y dirigirla a navegadores problemáticos mediante comentarios condicionales de IE o mediante la detección de características (más idealistas) proporcionada por Modernizr.

Prueba rápida (y obviamente funcional) para Modernizr:

Modernizr.addTest(''compliantzindex'', function(){
    var test  = document.createElement(''div''),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement(''body''));
        }());

    root.appendChild(test);
    test.style.position = ''relative'';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

Answer 10

Z-index no es una medida absoluta. Es posible que un elemento con índice z: 1000 esté detrás de un elemento con índice z: 1 - siempre que los elementos respectivos pertenezcan a diferentes contextos de apilamiento .

Cuando especifica z-index, lo especifica en relación con otros elementos en el mismo contexto de apilamiento, y aunque el párrafo de la especificación CSS en Z-index dice que un nuevo contexto de apilamiento solo se crea para contenido posicionado con un índice z distinto de auto (lo que significa que su documento completo debe ser un único contexto de apilamiento), sí construyó un tramo posicionado: lamentablemente IE7 interpreta el contenido posicionado sin z-index como un nuevo contexto de apilamiento.

En resumen, intente agregar este CSS:

#envelope-1 {position:relative; z-index:1;}

o rediseña el documento de forma tal que tus tramos no tengan posición: relativa por más tiempo:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Consulte http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ para obtener un ejemplo similar de este error. La razón por la que da un elemento padre (envelope-1 en su ejemplo) un índice z más alto es porque todos los hijos de envelope-1 (incluido el menú) se superpondrán a todos los hermanos de envelope-1 (específicamente, envelope-2).

Aunque el índice z le permite definir explícitamente cómo se superponen las cosas, incluso sin índice z, el orden de estratificación está bien definido . Finalmente, IE6 tiene un error adicional que hace que las casillas de selección y los iframes floten encima de todo lo demás.

Answer 11

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$(''div'').each(function() {
    $(this).css(''zIndex'', zIndexNumber);
    zIndexNumber -= 10;
});
});