Bonjour, chers lecteurs du site blog ! De temps en temps, je me permets d'ajouter des matériaux à la collection et aujourd'hui nous parlerons de la propriété z-index, qui affecte le positionnement des éléments sur une page Web.
Vous devez comprendre que cette règle ne fonctionne que pour les balises positionnées pour lesquelles la propriété est spécifiée. Autrement dit, pour le flux de documents standard (où le positionnement n'est pas spécifié ou son paramètre est défini comme statique), cela ne fonctionnera pas. Ci-dessous, je vais démontrer comment fonctionne z-index à l'aide d'un exemple spécifique.
Comment z-index détermine les positions des éléments
Ainsi, pour chaque élément en CSS, il y a sa propre place sur la page Web conformément aux styles qui lui sont prescrits. L'emplacement de tous les blocs les uns par rapport aux autres est déterminé à l'aide d'un système de coordonnées.
En général, le point de référence se trouve dans le coin supérieur gauche de la zone de visualisation (fenêtre du navigateur). Dans ce cas, les axes X et Y déterminent l'emplacement des éléments dans le plan de l'écran du moniteur. Mais l'axe Z, comme vous l'avez probablement deviné, permet de modéliser un système de coordonnées spatiales.
Il est situé perpendiculairement au plan formé par X et Y et est dirigé directement vers nous. Il va sans dire que le point de référence de l'axe Z est zéro. Le point zéro contient tous les éléments statiques pour lesquels la propriété position static est définie (positionnement normal).
Par défaut, si la position n'est pas du tout spécifiée, alors cette situation est absolument équivalente à celle si le paramètre static était spécifié. Dans ce cas, tous les éléments HTML de la page sont rendus sur le flux standard. Ainsi, la position, comme par exemple float (voir les informations sur la création d'éléments flottants en CSS) permet de modifier l'option de classement habituelle pour résoudre des problèmes de mise en page particuliers.
Même si les éléments Web statiques ont une valeur z de zéro, ce qui signifie qu'ils sont positionnés dans le plan X-Y, il existe des règles pour eux s'ils commencent à entrer en collision les uns avec les autres.
La règle de base est la suivante : un élément web défini par une balise située plus bas dans le code HTML de la page sera situé plus près de nous. C'est-à-dire qu'il chevauchera le bloc dont le code se trouve au-dessus.
Mais les éléments (dynamiques) clairement positionnés (avec des valeurs relatives, absolues, fixes) sont situés avant tous les éléments statiques. Dans la relation entre les éléments dynamiques du web, la même loi s'appliquera : celui situé plus bas dans le code est plus proche de nous (au-dessus des autres).
C'est là que le dernier mot peut être dit propriété z-index. Plus sa valeur numérique est élevée, plus l'élément correspondant de la page Web sera situé haut. Mais tout cela ne fonctionne, comme je l'ai dit, que pour les éléments à positionnement absolu, relatif ou fixe. La syntaxe des paramètres z-index est la suivante :
Index Z : nombre | auto | héritage
Les valeurs numériques peuvent être n'importe quoi : à la fois négatif et positif, y compris zéro. Le paramètre auto prédétermine la disposition automatique des éléments web selon leur ordre dans le code HTML, en tenant compte de leur filiation. La valeur héritée indique quel est le z-index du parent.
Le moment est désormais venu d'orienter nos recherches dans une direction pratique afin de confirmer les calculs théoriques. Je vais en prendre trois positionnés relativement (avec la propriété position: relative spécifiée) comme exemple. Pour plus de clarté, j'écrirai la nuance de couleur, le cadre pour chacune, et indiquerai également les marges gauche et supérieure, la largeur et la hauteur :
Sur la page Web, une fois que le navigateur a interprété le code HTML, ces trois blocs ressembleront à ceci :
Veuillez noter que les conteneurs sont situés en parfaite conformité avec la règle énoncée ci-dessus : le bleu inférieur chevauche le rouge situé légèrement plus haut et celui, à son tour, qui est encore plus vert. Ajoutons maintenant une propriété z-index avec une valeur de 1 au bloc rouge :
L'image va changer :
Comme vous pouvez le constater, le conteneur rouge prend un avantage et se situe désormais au-dessus des autres. Essayons ensuite d'ajouter un z-index au bloc vert, mais avec une valeur de 2 :
Le résultat sera comme ceci :
Il est clair que le conteneur vert qui a reçu la valeur d’indice z la plus élevée est désormais plus élevé que les autres. Ainsi, tous les arguments avancés au début sont pleinement confirmés par des expériences pratiques. La principale chose à retenir est que la propriété z-index ne fonctionne qu'avec des éléments Web explicitement positionnés.
Le problème avec z-index est que beaucoup de gens ne comprennent tout simplement pas comment cela fonctionne.
Tout ce qui est décrit ci-dessous est dans la spécification du W3C. Malheureusement, tout le monde ne le lit pas.
Description du problème:
Supposons donc que nous ayons un code HTML composé de 3 éléments.Chacun d’eux en contient un en lui-même. Et chacun, à son tour, a son propre fond : respectivement rouge, vert et bleu. De plus, chacun est positionné absolument sur le bord supérieur gauche du document de manière à chevaucher légèrement celui qui se trouve à côté. Le premier a un z-index égal à 1, les deux autres n’ont pas d’ensemble z-index.
Vous trouverez ci-dessous le code HTML avec une conception CSS de base.
.red, .green, .blue ( position : absolue ; ) .red ( arrière-plan : rouge ; z-index : 1 ; ) .green ( arrière-plan : vert ; ) .blue ( arrière-plan : bleu ; )
Exemple sur jsfiddle
Tâche: assurez-vous que le rouge est derrière le bleu et le vert, sans enfreindre aucune des règles suivantes :
- Vous ne pouvez pas modifier le balisage HTML
- Vous ne pouvez pas modifier/ajouter un z-index aux éléments
- Vous ne pouvez pas modifier/ajouter un positionnement aux éléments
Solution:
La solution est d'ajouter un peu moins d'une transparence à la première (le parent du rouge).Voici le CSS illustrant cela :
div:premier-enfant ( opacité : .99 ; )
Hmm, quelque chose ne va pas ici. Qu’est-ce que la transparence a à voir là-dedans ? Comment peut-il influencer l’ordre des éléments qui se chevauchent ? Pensez-vous la même chose ? Bienvenue au club!
J'espère que dans la deuxième partie de l'article, tout se mettra en place.
L'ordre des éléments superposés :
Le Z-index semble très simple : plus la valeur est élevée, plus l'élément sera proche de nous, c'est-à-dire un élément avec un z-index de 5 chevauchera un élément avec un z-index de 2, n'est-ce pas ? Pas vraiment.C'est le problème de l'index z. Tout cela semble si évident que la plupart des développeurs ne consacrent pas suffisamment de temps à étudier cette question.
Tout élément d'un document HTML peut être au premier plan ou en arrière-plan. Tout le monde le sait. Les règles qui définissent cet ordre sont clairement décrites dans le cahier des charges, mais, comme je l'ai dit plus haut, tout le monde ne les comprend pas parfaitement.
Si les propriétés z-index et de positionnement ne sont pas définies explicitement, tout est simple : l'ordre d'empilement est égal à l'ordre des éléments dans le HTML. (C'est en fait un peu plus compliqué que cela, mais tant que vous n'utilisez pas de valeurs de remplissage négatives pour chevaucher les éléments en ligne, vous ne rencontrerez pas de cas extrêmes)
Si vous spécifiez explicitement le positionnement des éléments (et de leurs enfants), ces éléments chevaucheront les éléments sans propriété de positionnement explicite. (Quand je dis « indiquer explicitement le positionnement », j'entends toute valeur autre que statique, par exemple : absolue ou relative).
Et enfin, le cas où le z-index est donné. Pour commencer, il est naturel de supposer que les éléments avec un z-index grand seront au-dessus des éléments avec un z-index plus petit, et que tout élément avec un ensemble z-index sera au-dessus d'un élément sans ensemble z-index, mais ceci n'est pas le cas. Premièrement, le z-index n'est pris en compte que sur les éléments explicitement positionnés. Si vous essayez de définir le z-index sur un élément non positionné, rien ne se passera. Deuxièmement, les valeurs du z-index peuvent créer des contextes de superposition. Hmm, les choses sont devenues beaucoup plus compliquées, n'est-ce pas ?
Contexte de superposition
Les éléments ayant des parents communs qui se déplacent ensemble au premier plan ou à l'arrière-plan sont appelés contexte de superposition. Comprendre le contexte d'empilement est essentiel pour comprendre le z-index et l'ordre d'empilement des éléments.Chaque contexte de superposition possède son propre élément racine dans la structure HTML. Au moment où un nouveau contexte est formé sur un élément, tous les éléments enfants entrent également dans ce contexte et prennent leur place dans l'ordre de superposition. Si un élément est positionné tout en bas d'un contexte de superposition, il n'y a aucun moyen qu'il puisse être affiché au-dessus d'un autre élément dans un contexte de superposition adjacent plus haut dans la hiérarchie, même avec un z-index défini sur un million.
Un nouveau contexte peut être formé dans les cas suivants :
- Si l'élément est l'élément racine du document (élément)
Si l'élément n'est pas positionné statiquement et que sa valeur z-index n'est pas automatique
Si l'élément a une opacité inférieure à 1
La plupart des propriétés CSS sont faciles à comprendre. Souvent, appliquer l'un d'entre eux à un élément de balisage donne des résultats immédiats - il vous suffit d'actualiser la page et vous pouvez voir l'effet de l'application. Cependant, certaines propriétés sont plus complexes et ne fonctionneront que dans certaines circonstances.
La propriété z-index appartient au deuxième groupe, ce qui provoque sans aucun doute plus de confusion que tout autre. Ironiquement, cependant, avec une compréhension complète de ce qu'est z-index, il est très facile à utiliser et constitue souvent un moyen efficace de surmonter de nombreux problèmes de mise en page.
Dans cet article, nous examinerons ce qu'est le z-index, les problèmes rencontrés pour le comprendre, et discuterons également de quelques exemples de son utilisation. Nous examinerons également la différence dans la façon dont les navigateurs le gèrent, en particulier dans les versions précédentes d'Internet Explorer et de FireFox.
Alors, quelle est cette propriété ?
La propriété z-index détermine le niveau de placement dans la pile, la profondeur de l'élément html. "Niveau de profondeur" désigne la position de l'élément le long de l'axe Z (perpendiculaire aux axes X et Y de l'écran). Plus la valeur de l'indice z est élevée, plus l'élément sera grand.
Disposition naturelle des éléments
Sur une page, le placement normal des éléments (c'est-à-dire le long de l'axe Z) est déterminé par plusieurs facteurs. Vous trouverez ci-dessous une liste de ces facteurs, en commençant par les éléments les plus bas. Cette liste suppose qu'aucun élément ne se voit explicitement attribuer une propriété z-index.
- L'arrière-plan et les bordures de l'élément définissant le contexte de la pile.
- Éléments avec un contexte de pile négatif, dans l'ordre d'affichage.
- Non positionnés (position : statique), ainsi que sans la propriété float définie (float : aucun) éléments de bloc (affichage : bloc), dans l'ordre d'affichage.
- Éléments de bloc non positionnés, définis avec des propriétés flottantes, dans l'ordre d'affichage.
- Éléments en ligne, dans l'ordre d'affichage.
- Éléments avec la propriété position définie, dans l’ordre d’affichage.
Une application correcte de la propriété z-index peut modifier la position naturelle dans la pile.
Bien entendu, l’ordre des éléments dans une pile n’est évident que lorsque vous devez afficher les éléments les uns au-dessus des autres. Par conséquent, pour voir l’ordre normal des éléments, l’exemple ci-dessous utilise des marges négatives.
Ces éléments ont des couleurs d'arrière-plan et de bordure différentes, et les deux derniers sont décalés en raison de la définition de la propriété de marge négative. De cette façon, vous pouvez voir le placement naturel des éléments, chaque élément suivant étant « au-dessus » du précédent. Ces éléments n'ont pas de jeu de propriétés z-index et leur ordre d'empilement est naturel.
Où pourraient être les problèmes ?
Examinons le problème le plus courant parmi les développeurs novices. Le fait est que la propriété z-index ne fonctionne que sur les éléments dont la propriété position est définie sur absolue , fixe ou relative .
Pour démontrer cela, affichons les trois mêmes éléments, mais avec la propriété z-index définie pour essayer de changer l'ordre le long de l'axe Z.
Fixons l'index z de l'élément gris à 9999, l'élément bleu à 500 et l'élément marron à 1. Il est logique de s'attendre à ce que l'ordre change. Mais pas dans ce cas, puisque la propriété position est statique par défaut.
Définissons la propriété position sur relative et voyons ce qui se passe :
Mais maintenant nous avons le résultat escompté. L'ordre des éléments a changé, l'élément gris est au-dessus de tout et l'élément marron est tout en bas.
Syntaxe
La propriété z-index affecte à la fois les éléments de bloc et les éléments en ligne. La valeur peut être un nombre positif ou négatif, ou la valeur par défaut est auto . La valeur par défaut signifie que l'élément est au même niveau que son parent.
Vous trouverez ci-dessous le CSS du troisième exemple, où la propriété z-index est appliquée correctement :
#grey_box ( largeur : 200 px ; hauteur : 200 px ; bordure : solide 1 px #ccc ; arrière-plan : #ddd ; position : relative ; z-index : 9999 ; ) #blue_box ( largeur : 200 px ; hauteur : 200 px ; bordure : solide 1 px # 4a7497 ; arrière-plan : #8daac3 ; position : relative ; z-index : 500 ; ) #gold_box (largeur : 200 px ; hauteur : 200px ; bordure : solide 1px #8b6125 ; arrière-plan : #ba945d ; position : relative ; z-index : 1 ; )
Encore une fois, en particulier pour ceux qui découvrent CSS, la propriété z-index ne fonctionnera que si vous définissez la propriété position.
Utiliser en javascript
Vous pouvez affecter la propriété z-index de manière dynamique à l'aide de javaScript. La syntaxe est similaire à celle de la plupart des propriétés CSS, utilisant la notation camel pour remplacer le trait d'union dans les propriétés CSS.
Var monElement = document.getElementById("gold_box"); monElement.style.position = "relatif" ; monElement.style.zIndex = "9999";
Implémentation incorrecte dans IE et FireFox
Dans certains cas, dans IE6, IE7 et FireFox 2, il existe une implémentation incorrecte de la propriété z-index.
Sélectionnez un élément dans IE6
Dans Internet Explorer 6, l'élément select est un contrôle Windows, pour cette raison il est toujours affiché au-dessus de tous les éléments, en ignorant l'ordre de placement normal, ainsi que les propriétés de position et d'index z. Le problème est illustré dans l'image ci-dessous :
L'élément select est le premier élément du document, sa propriété z-index est définie sur 1 et sa position est définie sur relative . Le div est affiché après la sélection et son z-index est "9999". Sur la base de tout cela, le div devrait être situé au-dessus du select , comme c'est le cas dans d'autres navigateurs :
Choisissez l'année - 2009 2010 2011
Si vous ne consultez pas cet article dans IE6, vous verrez que le div est positionné au-dessus du select .
Ce bug d'IE6 est un gros problème pour les menus déroulants lorsqu'ils doivent chevaucher l'élément de sélection. Une solution pourrait consister à utiliser JavaScript pour masquer temporairement les sélecteurs, puis à les afficher à nouveau après la disparition du menu. Une autre solution pourrait être d'utiliser une iframe.
Parents positionnés dans IE6/IE7
Internet Explorer versions 6 et 7 ne réinitialise pas correctement le contexte de pile par rapport au parent positionné le plus proche. Pour démontrer cette erreur, nous afficherons à nouveau deux div. Mais cette fois, nous envelopperons le premier dans un élément positionné.
L'élément gris a un z-index de 9999, l'élément bleu a un z-index de 1, les deux éléments sont positionnés. Par conséquent, s’il est correctement mis en œuvre, l’élément gris apparaîtra au-dessus de l’élément bleu.
Si vous ouvrez cette page dans IE6 ou IE7, vous verrez que l'élément bleu chevauche l'élément gris. Cela se produit parce que l'élément gray est enveloppé dans un autre div dont la position est définie sur relative .
Les deux navigateurs "réinitialisent" le contexte de la pile sur des éléments relativement positionnés, même s'ils ne devraient pas le faire. L'élément gris a un indice z plus élevé que l'élément bleu, il devrait donc apparaître plus haut. Il n'y a pas de problème de ce type avec les autres navigateurs.
Valeurs négatives dans FireFox 2
Dans FireFox 2, les éléments avec un z-index négatif se trouvent en dessous du contexte d'empilement, au lieu d'être au-dessus de l'arrière-plan et des bordures de l'élément qui forme le contexte d'empilement. Vous pouvez voir un exemple sur l'image :
Ci-dessous la version html
Comme vous pouvez le voir, l'arrière-plan de l'élément gris (qui forme le contexte de pile) est en dessous de l'élément bleu, et le texte (qui est l'élément en ligne dans l'élément gris) est au-dessus, suivant les règles de mise en page naturelles décrites ci-dessus.
Exemples d'utilisation
L'article original donne de nombreux exemples d'utilisation de la propriété. Honnêtement, j'ai la flemme de traduire ça, en gros c'est une capture d'écran, un petit commentaire et un lien. Si vous en avez vraiment besoin, écrivez, je prendrai le temps pour cela.
De l'auteur : Bienvenue dans notre série de didacticiels CSS de A à Z ! Dans cette série, je vais vous parler des valeurs et propriétés CSS commençant par différentes lettres de l'alphabet. Parfois, un didacticiel ne suffit pas et dans cet article, je vais vous donner quelques conseils rapides sur l'utilisation de la propriété z-index.
Le didacticiel vidéo complet et sa version texte sur la propriété z-index peuvent être consultés sur le lien.
Z signifie z-index
Comme on pouvait s'y attendre, le dernier article de la série sera entièrement consacré à la propriété z-index.
Comme mentionné dans le didacticiel vidéo, la propriété z-index contrôle l'ordre des calques dans un document. Il existe plusieurs problèmes complexes associés au contexte de pile, qui ont été abordés dans le didacticiel vidéo, mais en général, la propriété z-index a des fonctionnalités plutôt limitées.
z-index ne fonctionne que sur les éléments positionnés
Si vous devez modifier l'ordre des calques sur les éléments, vous pouvez le faire en utilisant la propriété z-index. Cependant, cette propriété ne fonctionnera qu'avec les éléments dont la propriété position est définie sur absolue, relative ou fixe.
Un positionnement précis des éléments est essentiel lors de la création de mises en page complexes et de modèles d'interface intéressants, mais nous voulons tous pouvoir modifier l'ordre des calques sans avoir à déplacer un élément de sa position d'origine sur la page.
Si vous avez simplement besoin de modifier l'ordre des calques, vous pouvez simplement définir la propriété position sur relative et laisser de côté le haut, la droite, le bas ou la gauche. L'élément restera à sa place, la structure du document ne sera pas perturbée et la propriété z-index fonctionnera comme il se doit.
Vous pouvez spécifier des valeurs négatives dans la propriété z-index
Les calques sont souvent utilisés pour créer des formes géométriques complexes ou des composants d'interface utilisateur. Cette superposition consiste à placer des éléments les uns au-dessus des autres avec une valeur d'indice z en constante augmentation. Pour déplacer un élément vers le bas, spécifiez simplement une valeur d'index z inférieure, mais cette propriété accepte également les valeurs négatives.
Les valeurs négatives peuvent être utilisées avec des pseudo-éléments pour les placer derrière le contenu de l'élément parent.
Pour placer les pseudo-éléments :before ou after sous le texte de l'élément parent, vous devez spécifier une valeur négative. C'est ainsi que fonctionne la pile.
Jetez un œil à la démo CodePen ci-dessous, vous pouvez jouer avec différentes valeurs d'index z.
Utiliser 100 comme incrément pour le z-index
Lorsque vous travaillez avec z-index, il n'est pas habituel d'écrire du code comme celui-ci :
Modal (indice z : 99999 ; )
Modal ( indice z : 99999 ; |
Cela me fait mal de regarder ce code. Les choses deviennent encore pires lorsque vous ajoutez !important. Un code comme celui-ci est le signe que le développeur ne comprend pas le contexte de la pile et essaie de forcer une couche au-dessus d'une autre.
Au lieu d’utiliser des nombres arbitraires comme 9999, 53 ou 12, nous pouvons systématiser notre échelle d’index z et la mettre en ordre. Et ce n'est pas parce que je suis un développeur atteint de trouble obsessionnel-compulsif. Honnêtement.
Comme incrément pour le z-index, je n'utilise pas un nombre à un chiffre, mais 100.
Couche un (index z : 100 ;).couche-deux (index z : 200 ;).couche-trois (index z : 300 ;)
Cette approche manuelle de création d'un système z-index est très robuste, mais elle peut devenir encore plus flexible lorsqu'elle est associée à un préprocesseur comme Sass. C'est tout, mes amis. C'était le dernier article de la série CSS A à Z ! Nous espérons que vous l'avez apprécié et que vous en avez appris beaucoup sur les propriétés CSS. |
Ce n'est pas la première page que je tape, mais c'est la première fois que je rencontre un tel problème. Dans l'une des conceptions, j'avais besoin de repenser le menu du catalogue. Initialement, un menu à un seul niveau était utilisé, mais l'activité du client s'est développée et il a dû mettre en œuvre un menu déroulant typique à plusieurs niveaux. "Aucun problème!" - J'ai réfléchi et j'ai rapidement commencé à esquisser des styles supplémentaires avec un balisage. Cela n’a pas pris beaucoup de temps, mais les premiers tests se sont révélés infructueux. Les niveaux de menu apparaissaient comme prévu, mais pour une raison quelconque, ils étaient recouverts par des éléments de la partie centrale de la page.
"Ha!" - m'a traversé la tête. Il manque probablement dans l'un des styles la propriété « z-index », qui vous permet de contrôler l'ordre d'empilement des éléments positionnés sur la page. J'ai commencé à ajouter « z-index » et rien de bon n'en est sorti. Quelle que soit la valeur que je lui attribuais, les éléments de la partie centrale de la page chevauchaient toujours mon menu.
Indice z ambigu
Il semblerait qu'est-ce qui pourrait être difficile avec z-index ? Nous savons tous que les éléments positionnés sur une page peuvent se chevaucher. La propriété « z-index » vous permet de contrôler l'ordre de superposition. Par exemple, si nous avons deux éléments avec une valeur attribuée indice z– 5 et 10, alors ce dernier sera mis au premier plan, car dix est plus que cinq, et plus signifie plus proche. Lorsque la propriété z-index n'est pas définie, l'ordre d'empilement est déterminé par l'ordre des éléments dans le document.
Il ne semble y avoir aucune difficulté jusqu’à ce que vous commenciez à creuser plus profondément. Les premières difficultés commencent avec l’apparition de contextes dits superposés. Le contexte de mélange fait référence à des éléments ayant des parents communs qui se déplacent ensemble au premier plan ou à l'arrière-plan.
Le contexte de superposition a un élément racine. Par exemple, nous avons quelques
Pour lequel nous définissons le contexte de superposition. Par conséquent, tous ses enfants tomberont également dans le même contexte de superposition.
C'est là que le plaisir commence. Les contextes de superposition ne se chevauchent pas. Après avoir placé un élément tout en bas d'un contexte, il ne sera pas possible de l'élever au-dessus de l'élément du contexte voisin. Changer la valeur de l'indice z, même par les nombres les plus incroyables, n'apportera pas l'effet escompté.
Lorsqu'un nouveau contexte de superposition est formé
La spécification définit plusieurs conditions pour la formation d'un contexte de superposition :
Pour l'avenir, je dirai que pour résoudre mon problème, il suffisait d'ajouter de la transparence ( opacité) pour l'élément de menu racine et tout a immédiatement fonctionné comme prévu.
Comment les éléments sont affichés dans le même contexte de superposition
Pour mieux consolider tout ce qui précède, rappelons une fois pour toutes l'ordre dans lequel les éléments sont affichés dans un contexte de superposition (de loin vers près).