Problemas de capas de IE7 Z-Index

163

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

¿Qué hay de malo z-indexen IE7?

Prueba 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>
css internet-explorer-7 z-index rezna
fuente
Si está buscando una solución
Nasaralla

Respuestas:

268

El índice Z 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 el índice z, lo está especificando en relación con otros elementos en el mismo contexto de apilamiento, y aunque el párrafo de la especificación CSS en el índice Z dice que un nuevo contexto de apilamiento solo se crea para contenido posicionado con un índice z distinto de automático (lo que significa que todo su documento debe ser un solo contexto de apilamiento), lo hizo construir un lapso de posicionado: Desafortunadamente IE7 interpreta el contenido colocado sin z-index esto como un nuevo contexto de pila.

En resumen, intente agregar este CSS:

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

o rediseñe el documento de modo que sus tramos ya no tengan posición: relativo:

<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 ver un ejemplo similar de este error. La razón por la que un elemento padre (sobre-1 en su ejemplo) funciona con un índice z más alto es porque todos los hijos de sobre-1 (incluido el menú) se superpondrán a todos los hermanos de sobre-1 (específicamente, sobre-2).

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

Eamon Nerbonne
fuente
44
finalmente lo resolvió :): la posición relativa es realmente molesta, así que de alguna manera adopté su idea sin los elementos 'envolventes', parece resolver el problema y también funciona, solo tengo que rediseñar un poco el código para el cuadro de sugerencias: gracias a lot
rezna
66
Hay tres cosas diferentes que impactan cómo los elementos se superponen entre sí: contextos de apilamiento, orden de origen y orden de pintura. Los problemas más obvios surgen cuando se trata de contextos de apilamiento : conocer los otros dos lo ayudará a descubrir las trampas más esotéricas.Fuente: CSS-Discuss Wiki.
rjb
2
agregar el índice z al elemento padre es una solución maravillosa
Danyun Liu
2
te quiero. ¡Posición agregada: relativa e índice z: 500 a mi padre y lo arregló!
Aymeric Gaurat-Apelli
2
Hice un violín de este problema con comentarios que demuestran la solución. jsfiddle.net/fNcGu/3
Christopher Johnson
15

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;
});
});
nixis
fuente
Después de leer la solución "correcta" anterior, traté de formular una solución para mi problema considerablemente más complejo que el trivial de la pregunta. Luego lancé esta respuesta y funcionó a las mil maravillas. Si la solución anterior es la correcta, esta es sin duda la más fácil. ¡Gracias!
Landon
11

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

Intente darle al elemento padre un valor de índice z más alto (puede ser incluso más alto que el valor del índice z del niño) para corregir el error.

ed1nh0
fuente
1
Gracias. Esta solución funcionó para mí al dar un índice z del contenedor principal, no necesariamente más alto que el índice z del niño.
neelmeg
4

Encontré este problema, pero en un gran proyecto donde los cambios de HTML tuvieron que solicitarse y se convirtieron en un problema completo, por lo que estaba buscando una solución CSS pura.

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

El problema con eso fue que esto deshabilitó todas las acciones de desplazamiento y clic en todo el contenido del elemento con el, z-index:-1así que fui al elemento principal de toda la página y le diposition:relative; z-index:1

Lo que solucionó el problema y mantuvo la funcionalidad de capas correcta.

Se siente un poco hacky, pero funcionó según sea necesario.

lukeroxout
fuente
3

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

div {índice z: 10; }

Para que el índice z de divs no relacionados, como una navegación, se muestre encima del control deslizante. No podría simplemente agregar un índice z al control deslizante div.

Soluciones eBar
fuente
Descubrí que esto además de html {z-index:1; position:relative;}permitir que el menú pasara sobre la imagen del carrusel en IE.
bassplayer7
2

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

Prueba rápida (y obviamente funcionando) 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;
});
esferoide
fuente
¡Muy agradable! La detección de características es definitivamente el camino a seguir.
Jason
1

Parece que no es un error, es decir, para una comprensión diferente del estándar CSS. Si el contenedor externo no se especifica el índice z, pero el elemento interno 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.

c2j
fuente
0

En IE6 en general, ciertos elementos de la interfaz de usuario se implementan con controles nativos. Estos controles se representan en una fase completamente separada (¿ventana?) Y siempre aparecen sobre 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 contenido que IE represente como una "ventana" separada, es decir, puede colocar un cuadro de selección sobre un cuadro de texto o, más útilmente, un iframe.

En resumen, tendrá que poner "on-hover" como cosas como menús en un iframe para permitir que IE coloque estos controles de interfaz de usuario integrados.

Esto debería haberse solucionado en IE7 (consulte http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) pero ¿tal vez esté ejecutando algún tipo de modo de compatibilidad?

Eamon Nerbonne
fuente
Sé sobre el error del índice z IE6, y esto se solucionó, pero hay otro problema con los elementos / entradas de posición relativamente / absoluta en IE7 (que se corrige en IE8). Encontré un par de soluciones (jugar con indecisiones z), pero ninguno de ellos trabajó, por eso pregunto allí ... De todos modos, gracias por la respuesta.
rezna
0

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

Jeremy Kauffman
fuente
0

Si desea crear un menú desplegable y tiene un problema con el índice z, puede resolverlo creando índices z del mismo valor (índice z: 999; por ejemplo). Simplemente coloque el índice z en los divisores padre e hijo y Eso resolverá el problema. Resuelvo el problema con eso. Si pongo diferentes índices z, seguro, mostrará mi div hijo sobre mi div padre, pero, una vez que quiera mover mi mouse de la pestaña del menú al div submenú (lista desplegable), desaparecerá ... luego pongo índices z del mismo valor y resuelvo el problema ...

Marko
fuente
0

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

Lucas
fuente