html - puede - pp y ppk

¿Cómo se puede calcular 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.

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

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

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

Answer 1

Considere este código que puede usar como biblioteca: getMaxZIndex

Answer 2

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 tan probable que lo que realmente sucedió aquí es que has olvidado que solo los elementos posicionados se ven afectados por z-index .

Además, z-index no se asignan automáticamente, solo en hojas de estilo, lo que significa que sin ningún otro elemento z-index:1; , z-index:1; estará encima de todo lo demás.

Answer 3

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

Answer 4

Me gustaría agregar mi implementación de ECMAScript 6 que uso en uno de mis UserScripts. Estoy usando este para definir el z-index de elementos específicos para que siempre aparezcan los más altos. Puedo excluir estos elementos con el encadenado :not selector.

let highestZIndex = 0;

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

Las cinco líneas más bajas pueden ejecutarse varias veces y actualizar la variable highestZIndex repetidamente al encontrar el máximo entre el valor de highestZIndex actual y todos los demás índices z calculados de todos los elementos. El filter excluye todos los valores "auto" .

Answer 5

No hay una propiedad predeterminada ni nada, pero podrías 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 6

Puede llamar a findHighestZIndex para un tipo de elemento en particular, como un ''DIV'' como este:

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 7

Robar un código del sitio de Abcoder por motivos de 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 8

Supongo que tienes que hacer esto tú 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 9

Tuve que hacer esto recientemente para un proyecto, y descubrí que me beneficié mucho con la gran respuesta de aquí, y la gran respuesta de (la respuesta aceptada).

Las principales diferencias con respecto a las respuestas mencionadas anteriormente son:

• Se calculan el CSS z-index y cualquier estilo de z-index línea, y utilizan el más grande de los dos para comparación y cálculo.
• Los valores se fuerzan en enteros, y cualquier valor de cadena ( auto , static , etc.) se ignora.

Here hay un CodePen para el ejemplo de código, pero también está incluido aquí.

(() => {
  /**
   * Determines is the value is numeric or not.
   * See: https://.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://.com/a/1118216/1058612
   *  [2] https://.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 10

Usando ES6 un enfoque más limpio

function maxZIndex() {

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

Answer 11

Usando jQuery:

si no se suministran elementos, 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;
}