¿Cómo se puede averiguar el índice z más alto en su documento?

Question

Para establecer un div que contenga una imagen de texto transparente como el índice z más alto en mi documento, elegí el número 10,000 y resolvió mi problema.

Anteriormente había adivinado con el número 3 pero no tuvo ningún efecto.

Entonces, ¿hay una manera más científica de averiguar qué índice Z es más alto que el de todos sus otros elementos?

Intenté buscar esta métrica en Firebug pero no pude encontrarla.

Answer 1

Se podría llamar findHighestZIndex para un tipo de elemento particular tal como un 'DIV' como esto:

findHighestZIndex('div'); 

asumiendo una función findHighestZindex que se define así:

function findHighestZIndex(elem) 
{ 
    var elems = document.getElementsByTagName(elem); 
    var highest = 0; 
    for (var i = 0; i < elems.length; i++) 
    { 
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index"); 
    if ((zindex > highest) && (zindex != 'auto')) 
    { 
     highest = zindex; 
    } 
    } 
    return highest; 
} 

Answer 2

No hay una propiedad predeterminada ni nada, pero puede escribir algunos javascript para recorrer todos los elementos y resolverlo. O si usa una biblioteca de gestión de DOM como jQuery, podría ampliar sus métodos (o averiguar si ya lo admite) para que comience a rastrear elementos z-índices desde la carga de la página, y luego se vuelve trivial recuperar la mayor z- índice.

Answer 3

La mejor manera de resolver este problema es, en mi opinión, establecer las convenciones para qué tipos de z-index se usan para diferentes tipos de elementos. Luego, encontrará el z-index correcto para usar al revisar su documentación.

Answer 4

Creo que lo que estás observando es Voodoo. Sin acceso a su hoja de estilo completa, por supuesto que no puedo decir con fiabilidad; pero me parece probable que lo que realmente sucedió aquí es que has olvidado que solo los elementos posicionados se ven afectados por z-index.

Además, es z-index no se asignan automáticamente, sólo en las hojas de estilo, lo que significa que con ningún otro elemento ed z-index, z-index:1; habrá encima de todo lo demás.

Answer 5

Robar algo de código desde el sitio abcoder en aras de la claridad:

var maxZ = Math.max.apply(null, 
    $.map($('body *'), function(e,n) { 
     if ($(e).css('position') != 'static') 
     return parseInt($(e).css('z-index')) || 1; 
    })); 

Answer 6

supongo que tienes que hacer esto por sí mismo ...

function findHighestZIndex() 
{ 
    var divs = document.getElementsByTagName('div'); 
    var highest = 0; 
    for (var i = 0; i < divs .length; i++) 
    { 
     var zindex = divs[i].style.zIndex; 
     if (zindex > highest) { 
      highest = zindex; 
     } 
    } 
    return highest; 
} 

Answer 7

Usando jQuery:

si no hay elementos suministrados, comprueba todos los elementos.

function maxZIndex(elems) 
{ 
    var maxIndex = 0; 
    elems = typeof elems !== 'undefined' ? elems : $("*"); 

    $(elems).each(function(){ 
         maxIndex = (parseInt(maxIndex) < parseInt($(this).css('z-index'))) ? parseInt($(this).css('z-index')) : maxIndex; 
         }); 

return maxIndex; 
} 

Answer 8

consideran este código que se puede utilizar como una biblioteca: getMaxZIndex

Answer 9

me gustaría añadir mi implementación de ECMAScript 6 que utilizo en una de mis userscripts. Estoy usando este para definir el índice Z de elementos específicos para que siempre aparezcan los más altos. Puedo excluir estos elementos con el selector encadenado :not.

var highestZIndex=0; 

// later, potentially repeatedly 
highestZIndex=Math.max(highestZIndex,...[...document 
    .querySelectorAll('body *:not([data-highest]):not(.yetHigher)') 
].map(a=>parseFloat(getComputedStyle(a).zIndex)) 
    .filter(a=>!isNaN(a))); 

Las cuatro líneas inferiores pueden ejecutar varias veces y actualizar la variable highestZIndex repetidamente mediante la búsqueda de la máxima entre el valor actual highestZIndex y todos los demás índices calculados z de todos los elementos. El filter excluye todos los valores "auto".

Answer 10

Tuve que hacer esto recientemente para un proyecto, y encontré que me beneficié mucho de la excelente respuesta de @Philippe Gerber aquí, y de la gran respuesta de @flo (la respuesta aceptada).

Las diferencias claves a las respuestas que se hace referencia anteriormente son:

• Tanto el CSS z-index, y cualquier estilo en línea z-index se calcula, y utilizan el mayor de los dos para la comparación y cálculo.
• Los valores se fuerzan en enteros, y se ignoran los valores de cadena (auto, static, etc.).

Here es una CodePen para el ejemplo del código, pero también se incluye aquí.

(() => { 
 
    /** 
 
    * Determines is the value is numeric or not. 
 
    * See: https://stackoverflow.com/a/9716488/1058612. 
 
    * @param {*} val The value to test for numeric type. 
 
    * @return {boolean} Whether the value is numeric or not. 
 
    */ 
 
    function isNumeric(val) { 
 
    return !isNaN(parseFloat(val)) && isFinite(val); 
 
    } 
 

 
    
 
    /** 
 
    * Finds the highest index in the current document. 
 
    * Derived from the following great examples: 
 
    * [1] https://stackoverflow.com/a/1118216/1058612 
 
    * [2] https://stackoverflow.com/a/1118217/1058612 
 
    * @return {number} An integer representing the value of the highest z-index. 
 
    */ 
 
    function findHighestZIndex() { 
 
    let queryObject = document.querySelectorAll('*'); 
 
    let childNodes = Object.keys(queryObject).map(key => queryObject[key]); 
 
    let highest = 0; 
 
    
 
    childNodes.forEach((node) => { 
 
     // Get the calculated CSS z-index value. 
 
     let cssStyles = document.defaultView.getComputedStyle(node); 
 
     let cssZIndex = cssStyles.getPropertyValue('z-index'); 
 
     
 
     // Get any inline z-index value. 
 
     let inlineZIndex = node.style.zIndex; 
 

 
     // Coerce the values as integers for comparison. 
 
     cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0; 
 
     inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0; 
 
     
 
     // Take the highest z-index for this element, whether inline or from CSS. 
 
     let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex; 
 
     
 
     if ((currentZIndex > highest)) { 
 
     highest = currentZIndex; 
 
     } 
 
    }); 
 

 
    return highest; 
 
    } 
 

 
    console.log('Highest Z', findHighestZIndex()); 
 
})();

#root { 
 
    background-color: #333; 
 
} 
 

 
.first-child { 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.second-child { 
 
    background-color: #00ff00; 
 
    display: block; 
 
    height: 90%; 
 
    width: 90%; 
 
    padding: 0; 
 
    margin: 5%; 
 
} 
 

 
.third-child { 
 
    background-color: #0000ff; 
 
    display: block; 
 
    height: 90%; 
 
    width: 90%; 
 
    padding: 0; 
 
    margin: 5%; 
 
} 
 

 
.nested-high-z-index { 
 
    position: absolute; 
 
    z-index: 9999; 
 
}

<div id="root" style="z-index: 10"> 
 
    <div class="first-child" style="z-index: 11"> 
 
    <div class="second-child" style="z-index: 12"></div> 
 
    </div> 
 
    <div class="first-child" style="z-index: 13"> 
 
    <div class="second-child" style="z-index: 14"></div> 
 
    </div> 
 
    <div class="first-child" style="z-index: 15"> 
 
    <div class="second-child" style="z-index: 16"></div> 
 
    </div> 
 
    <div class="first-child" style="z-index: 17"> 
 
    <div class="second-child" style="z-index: 18"> 
 
     <div class="third-child" style="z-index: 19"> 
 
     <div class="nested-high-z-index">Hello!!! </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="first-child"> 
 
    <div class="second-child"></div> 
 
    </div> 
 
    <div class="first-child"> 
 
    <div class="second-child"></div> 
 
    </div> 
 
    <div class="first-child"> 
 
    <div class="second-child"></div> 
 
    </div> 
 
</div>

Answer 11

Utilizando un enfoque más limpio ES6

function maxZIndex() { 

    return Array.from(document.querySelectorAll('body *')) 
      .map(a => parseFloat(window.getComputedStyle(a).zIndex)) 
      .filter(a => !isNaN(a)) 
      .sort() 
      .pop(); 
}