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

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

Voler du code du site abcoder pour des raisons 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; })); 

Utiliser ES6 pour 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(); } 

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

Je crois que ce que vous observez est le vaudou. Sans access à 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, les z-index es ne sont pas affectés automatiquement, uniquement dans les feuilles de style, ce qui signifie que sans autres éléments ed d’ z-index z-index:1; , z-index:1; sera sur tout le rest.

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

Il n’y a pas de propriété par défaut ou autre, 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 telle que jQuery, vous pouvez étendre ses méthodes (ou savoir si elle le prend déjà en charge) pour qu’il commence à suivre les z-indices des éléments à partir du chargement de la page. indice.

J’aimerais append mon implémentation ECMAScript 6 que j’utilise dans l’un de mes UserScripts. J’utilise celui-ci pour définir le z-index d’éléments spécifiques afin qu’ils apparaissent toujours les plus élevés. 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 resockets en recherchant le maximum entre la valeur actuelle la highestZIndex élevée de highestZIndex et tous les autres indices z calculés de tous les éléments. Le filter exclut toutes les valeurs "auto" .

J’ai dû le faire récemment pour un projet, et j’ai constaté que j’ai beaucoup bénéficié de la bonne réponse de @Philippe Gerber et de la bonne réponse de @flo (la réponse acceptée).

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

• Le z-index CSS et tout style d’ z-index sont calculés et utilisent le plus grand des deux pour la comparaison et le calcul.
• Les valeurs sont forcées dans des entiers et toutes les valeurs de chaîne ( auto , static , etc.) sont ignorées.

Voici un CodePen pour l’exemple de code, mais il est inclus ici aussi.

 (() => { /** * 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; } 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
Hello!!! 
 
 
 
 
 
 
 
 
 
 
 
 
  

Utiliser 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; } 

Considérez ce code que vous pouvez utiliser comme bibliothèque: getMaxZIndex