web-dev-qa-db-fra.com

Comment pouvez-vous déterminer le z-index le plus élevé dans votre document?

Afin de définir un div contenant une image de texte transparente comme l'index z le plus élevé de mon document, j'ai choisi le nombre 10 000 et cela a résolu mon problème.

Auparavant, j'avais deviné le chiffre 3, mais cela n'avait aucun effet.

Alors, existe-t-il un moyen plus scientifique de déterminer quel indice z est supérieur à celui de tous vos autres éléments?

J'ai essayé de rechercher cette métrique dans Firebug mais je ne l'ai pas trouvée.

htmlcssz-index
65
Charlie Kotter

Vous pouvez appeler findHighestZIndex pour un type d'élément particulier tel qu'un 'DIV' comme ceci:

findHighestZIndex('div');

en supposant une fonction findHighestZindex définie comme ceci:

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;
}
35
flo

Voler du code sur le site abcoder pour plus de clarté:

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

Utiliser ES6 une approche plus propre

function maxZIndex() {

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

La meilleure façon de résoudre ce problème est, à mon avis, simplement de vous fixer des conventions pour quels types de z-indexes sont utilisés pour différents types d'éléments. Ensuite, vous trouverez le bon z-index à utiliser en consultant votre documentation.

4
Gareth

Je crois que ce que vous observez est vaudou. Sans accès à votre feuille de style complète, je ne peux bien sûr pas le dire de manière fiable; mais il me semble probable que ce qui s'est réellement passé ici, c'est que vous avez oublié que seuls les éléments positionnés sont affectés par z-index.

De plus, z-index Es ne sont pas attribués automatiquement, uniquement dans les feuilles de style, ce qui signifie qu'en l'absence d'autres éléments z-index Ed, z-index:1; Sera au-dessus de tout le reste.

4
Williham Totland

Je suppose que vous devez le faire vous-même ...

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;
}
4
Philippe Gerber

Je souhaite ajouter mon implémentation ECMAScript 6 que j'utilise dans l'un de mes scripts utilisateur. J'utilise celui-ci pour définir le z-index d'éléments spécifiques pour qu'ils apparaissent toujours au plus haut. Je peux exclure ces éléments avec le chaîné :not sélecteur.

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))
);

Les cinq lignes inférieures peuvent être exécutées plusieurs fois et mettre à jour la variable highestZIndex à plusieurs reprises en trouvant le maximum entre la valeur actuellehighestZIndex et tous les autres z-indices calculés de tous les éléments. filter exclut tous les "auto" valeurs.

4
Sebastian Simon

Il n'y a pas de propriété par défaut ou quoi que ce soit, mais vous pouvez écrire du javascript pour parcourir tous les éléments et le comprendre. Ou si vous utilisez une bibliothèque de gestion DOM comme jQuery, vous pouvez étendre ses méthodes (ou savoir si elle la prend déjà en charge) pour qu'il commence à suivre les index z des éléments à partir du chargement de la page, puis il devient trivial de récupérer le z- le plus élevé indice.

4
Rahul

J'ai dû le faire pour un projet récemment, et j'ai trouvé que j'ai beaucoup profité de la grande réponse de @ Philippe Gerber ici, et de la grande réponse de @ flo ( la réponse acceptée).

Les principales différences par rapport aux réponses mentionnées ci-dessus sont les suivantes:

  • Le CSS z-index, et tout en ligne z-index le style est calculé et utilise le plus grand des deux pour la comparaison et le calcul.
  • Les valeurs sont contraintes en nombres entiers et toutes les valeurs de chaîne (auto, static, etc.) sont ignorées.

Ici est un CodePen pour l'exemple de code, mais il est également inclus ici.

(() => {
  /**
   * 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>
1
JohnnyCoder

Utilisation de jQuery:

si aucun élément n'est fourni, il vérifie tous les éléments.

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;
}
0
Misfer Ali

Une solution très inspirée de l'excellente idée de @ Rajkeshwar Prasad .

        /**
        returns highest z-index
        @param {HTMLElement} [target] highest z-index applyed to target if it is an HTMLElement.
        @return {number} the highest z-index.
        */
        var maxZIndex=function(target) {
            if(target instanceof HTMLElement){
                return (target.style.zIndex=maxZIndex()+1);
            }else{
                var zi,tmp=Array.from(document.querySelectorAll('body *'))
                    .map(a => parseFloat(window.getComputedStyle(a).zIndex));
                zi=tmp.length;
                tmp=tmp.filter(a => !isNaN(a));
                return tmp.length?Math.max(tmp.sort((a,b) => a-b).pop(),zi):zi;
            }
        };
#layer_1,#layer_2,#layer_3{
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
}
#layer_1{
  left:10px;
  top:10px;
  background-color:#f00;
}
#layer_2{
  left:60px;
  top:20px;
  background-color:#0f0;
  z-index:150;
}
#layer_3{
  left:20px;
  top:60px;
  background-color:#00f;
}
<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>
0
yorg

Array.reduce ()

Voici une autre solution pour déterminer le plus haut z-index qui utilise Array.reduce() :

const max_zindex = [...document.querySelectorAll('body *')].reduce((accumulator, current_value) => {
  current_value = +getComputedStyle(current_value).zIndex;

  if (current_value === current_value) { // Not NaN
    return Math.max(accumulator, current_value)
  }

  return accumulator;
}, 0); // Default Z-Index Rendering Layer 0 (Zero)
0
Grant Miller

Si vous cherchez à afficher les ID de tous les éléments avec les indices z les plus élevés:

function show_highest_z() {
    z_inds = []
    ids = []
    res = []
    $.map($('body *'), function(e, n) {
        if ($(e).css('position') != 'static') {
            z_inds.Push(parseFloat($(e).css('z-index')) || 1)
            ids.Push($(e).attr('id'))
        }
    })
    max_z = Math.max.apply(null, z_inds)
    for (i = 0; i < z_inds.length; i++) {
        if (z_inds[i] == max_z) {
            inner = {}
            inner.id = ids[i]
            inner.z_index = z_inds[i]
            res.Push(inner)
        }
    }
    return (res)
}

tilisation:

show_highest_z()

Résultat:

[{
    "id": "overlay_LlI4wrVtcuBcSof",
    "z_index": 999999
}, {
    "id": "overlay_IZ2l6piwCNpKxAH",
    "z_index": 999999
}]
0
Cybernetic