Comment déterminer l'indice z le plus élevé de votre document ?

Question

Afin de définir un div contenant une image de texte transparent comme étant l'indice 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é avec le chiffre 3 mais cela n'a eu aucun effet.

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

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

Answer 1

Voler un peu de code du 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;
  }));

Answer 2

Vous pourriez appeler findHighestZIndex pour un type d'élément particulier tel que <div> comme ça :

findHighestZIndex('div');

en supposant un findHighestZindex qui est définie comme suit :

function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
  for (var i = 0; i < elems.length; i++)
  {
    var zindex = Number.parseInt(
      document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
      10
    );
    if (zindex > highest)
    {
      highest = zindex;
    }
  }
  return highest;
}

Answer 3

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

Answer 4

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

En outre, z-index es ne sont pas attribuées automatiquement, mais uniquement dans les feuilles de style, ce qui signifie qu'en l'absence d'autre z-index éléments, z-index:1; sera au dessus de tout le reste.

Answer 5

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