Cómo calcular el índice z efectivo de un elemento HTML

Me gustaría determinar el índice z de un elemento en una página html desde el código. Estoy usando jQuery.Cómo calcular el índice z efectivo de un elemento HTML

jQuery me permitirá verificar el índice z aplicado usando $ (elemento) .css ("z-index"). Sin embargo, si el índice Z no está establecido en ese elemento directamente, Firefox devuelve "auto" e IE devuelve "0". El índice z efectivo de ese nodo depende del índice z de su contenedor.

Pensé que podía calcular el índice z efectivo y luego mirar el nodo y sus padres hasta que se encuentre un valor de índice Z. El problema es que, al menos en IE, no puedo eliminar la ambigüedad de un elemento con un índice z de 0 de un elemento que heredará el índice z de su elemento primario, ya que en ambos casos .css ("índice z") devuelve 0 ¿Alguna idea sobre cómo calcular el índice z real de un elemento?

Si desea experimentar, puede usar este código. En IE saldrá "0", "0", "0", "300". En Firefox mostrará "auto", "auto", "0", "300".

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

</head> 

<body> 

<script type="text/javascript"> 
    alert($("<div></div>").css("z-index")); 
    alert($("<div style='position:relative'></div>").css("z-index")); 
    alert($("<div style='z-index:0'></div>").css("z-index")); 
    alert($("<div style='z-index:100'></div>").css("z-index")); 
</script> 

</body> 
</html>

Fuente

2010-01-07 Frank Schwieterman

esto será complicado en algunas páginas, ya que puede tener varios índices de apilamiento. ¿Estás tratando de resolver esto para poder apilar algo encima de otra cosa? – scunliffe

Algo así (ocultando las cosas que están apiladas más allá de un límite z-index) –

en IE, no puedo eliminar la ambigüedad de un elemento con un índice z de 0 de un elemento que heredarán el índice z de su padre

Usted está buscando elementos que tiene un efectivo z-index. z-index es efectivo solo en elementos con un estilo position que no sea static. Por lo tanto, debe buscar a los padres hasta que encuentre un elemento situado con z-index no auto.

(Esto le dará la más interna z-index. Apilamiento contextos se pueden anidar, por lo que es posible que en lugar que desee ver en la parte más externa del índice Z mirando el ancestro más lejano para ser colocado.)

En IE6-7, un elemento sin z-index recibe incorrectamente un z-index automático de 0. Así que esto realmente le dará una lectura de 0 cuando mira el elemento posicionado sin un z-index en IE6-7 ... esto puede ser incorrecto, pero está reflejando el renderizado incorrecto de IE que tendrá que evitar o trabajar de todos modos .

(En IE8 esto se fijó finalmente y que de hecho conseguir auto por primera alerta, suponiendo un tipo de documento adecuado/EmulateIE configuración para enviar en modo nativo IE8.)

Fuente

2010-01-07 22:44:55 bobince

Buen punto de que el índice z solo debe considerarse para los elementos posicionados (y cualquier recorrido para determinar un elemento z-index debe omitir no- elementos posicionados). –

IE devolverá un índice z de 0 en los casos en que se hereda el índice z. Sin embargo, IE aplicará el índice z heredado correctamente, por lo que el escenario IE6-IE7 sigue siendo un problema. –

El error es que IE6-7 * no puede * 'heredar' un contexto de apilamiento en un elemento posicionado. Cuando obtiene '0' como' z-index' en un elemento posicionado, puede estar seguro de que 0 es el IE de índice z que realmente está usando para representar el elemento, incluso si no debe ser de acuerdo con las especificaciones de CSS. – bobince

veo el problema, pero me no estoy seguro de lo que realmente importa ... porque el cero es la raíz z-índice de la página es 0. En el siguiente código:

alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex); 
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);

FF informa 10 y (no 'auto'). IE informa 10 y 0. Para IE, si ve un 0, suba un nivel. Para FF, si ve un espacio en blanco, suba un nivel. Y luego, en cualquier caso, si llegas a la raíz, y el valor es 'auto' (en el estado de FF), entonces (adivino) podrías asumir que es 0. (¡Tal vez no sea una gran suposición!)

Fuente

2010-01-07 22:46:04

"Para IE, si ve un 0, suba un nivel". Esta afirmación supone que el índice z del elemento no se estableció en 0 explícitamente. Supongo que esto es poco probable, pero descarté este enfoque antes por este motivo. Tal vez sea posible ya que el contenido que estoy viendo es contenido publicitario, donde algunos de los proveedores de anuncios pueden hacer cosas extrañas si pueden para obtener más visibilidad. –

Sí, entiendo su punto ... sin embargo, me pregunto ... ¿el IE sí mismo distingue? Es decir, ¿usa 0 como marcador para significar "no establecido"? Si ese es el caso, la configuración de 0 no es diferente de no configurarlo. Supongo que necesitarás ejecutar algunas pruebas reales de renderizado para saber con certeza. –

Creo que esta función va a resolver su problema en la mayoría de los casos

function ustMaxZIndex(eleman) { 
    var elm = $('#'+eleman); 
    var zindex = parseInt(elm.css("z-index")) > 0 ? elm.css("z-index") : 0; 
    while(true) { 
    zindex = (parseInt(elm.css("z-index")) > 0 && parseInt(elm.css("z-index")) > zindex) ? elm.css("z-index") : zindex; 
    if(elm.length > 0) { 
     elm = elm.parent(); 
    } else { 
     break; 
    } 
    } 
    return zindex; 
}

Fuente

2014-09-15 13:39:43

versión optimizada de la respuesta de MC_delta_T:

Esto no funcionará con anidados índices de z, pero va a encontrar el más alto valor en la jerarquía, que debería funcionar la mayoría del tiempo:

function getEffectiveZIndex(elm) { 
    var elementZIndex, 
     style, 
     zindex = 0; 

    while(elm) { 
     style = getComputedStyle(elm); 

     if (style) { 
      elementZIndex = parseInt(style.getPropertyValue('z-index'), 10); 

      if (elementZIndex > zindex) { 
       zindex = elementZIndex; 
      } 
     } 

     elm = elm.parentNode; 
    } 

    return zindex; 
}

Fuente

2014-12-09 09:39:03 phreakhead

Cómo calcular el índice z efectivo de un elemento HTML

Respuesta

Cuestiones relacionadas