Share
le z-index La propriété en CSS semble assez simple, mais il y a beaucoup à découvrir sous la surface si vous voulez vraiment comprendre comment cela fonctionne. Dans ce tutoriel, nous allons clarifier le fonctionnement interne de z-index, en regardant contextes d'empilement et quelques exemples pratiques.
CSS fournit trois schémas de positionnement différents pour la disposition des boîtes:
Le dernier supprime complètement un élément du flux normal et repose sur le développeur pour indiquer à l'élément où afficher.
Vous lui donnez les valeurs top, left, bottom et right pour positionner l'élément dans un espace à deux dimensions, mais CSS vous permet également de le placer dans la troisième dimension à l'aide de la propriété z-index.
En surface, z-index semble être une propriété facile à utiliser. Vous définissez des valeurs pour déterminer l'emplacement de l'élément sur ce troisième axe, et vous avez terminé. Sous la surface, il y a beaucoup d'autres choses à explorer, y compris un certain nombre de règles pour lesquelles les types d'éléments se superposent.
Commençons par les bases pour nous assurer que nous sommes tous sur la même page, puis nous parlerons d'empilement pour mieux comprendre ce qui se passe avec z-index en coulisse..
Je suis sûr que vous connaissez l'espace de coordonnées en trois dimensions. Nous avons un axe des x qui est généralement utilisé pour représenter l'horizontale, un axe des y pour représenter la verticale et un axe des z utilisé pour représenter ce qui se passe dans et hors de la page, ou l'écran dans notre cas.
Nous ne sommes pas littéralement voir l'axe z, car l'écran est un plan bidimensionnel. Nous le voyons sous forme de perspective et de certains éléments apparaissant devant ou derrière d’autres éléments quand ils partagent le même espace à deux dimensions.
Pour déterminer l'emplacement de l'élément le long de ce troisième axe, CSS nous permet de définir trois valeurs sur la propriété z-index.
Pour le moment, concentrons-nous sur la valeur entière. Cela peut être positif, négatif ou 0. Plus la valeur est grande, plus l'élément est proche du spectateur. Plus la valeur est basse, plus elle semble éloignée.
Si deux éléments sont positionnés de sorte qu'ils occupent tous deux une zone partagée d'espace bidimensionnel, l'élément avec le plus grand indice z obscurcira ou obturera l'élément avec l'indice z inférieur dans les zones où ils partagent l'espace..
Je suppose que ce qui précède est assez facile à comprendre et se comporte probablement comme prévu. Cependant, il y a des questions sans réponse qui traînent.
Pour répondre à ces questions, nous devons en savoir plus sur le fonctionnement de z-index, en particulier sur l'idée d'empiler des contextes, des niveaux d'empilement et des ordres d'empilement..
Empiler des contextes et des niveaux d'empilement peut être un peu difficile à conceptualiser, alors imaginez un instant un tableau avec un tas d'éléments assis dessus. La table représente un contexte d'empilement. S'il y a une deuxième table à côté de la première, cela représente un autre contexte d'empilement.
Maintenant, imaginez que sur la première table, il y a quatre petits blocs, tous assis directement sur la table. Au-dessus de ces quatre blocs se trouve une assiette de verre et au-dessus de cette assiette, un bol de fruits. Les blocs, la plaque de verre et le bol de fruits représentent chacun un niveau d'empilement différent dans le contexte d'empilement correspondant à la table..
Un seul contexte d'empilement par défaut est créé pour chaque page Web. La racine de ce contexte (la table) est la html élément. Tout ce qui se trouve à l'intérieur de la balise html se trouve à un niveau d'empilement dans ce contexte d'empilement par défaut (objets placés sur la table)..
Lorsque vous affectez une valeur d'index-z autre que auto à un élément, vous créez un nouveau contexte de pile avec de nouveaux niveaux de pile indépendants des autres contextes de pile et des niveaux de pile de la page. Vous apportez une autre table dans la pièce pour permettre aux objets de s'asseoir.
Le moyen le plus simple de comprendre l'ordre d'empilement consiste à utiliser un exemple simple, si simple que nous ne considérerons même pas les éléments positionnés pour un moment..
Pensez à une page Web très simple. Autre que le défaut Qu'attendez-vous voir lorsque vous chargez la page?? Espérons qu’il ne vous aura pas fallu beaucoup de temps pour imaginer un écran principalement bleu, à l’exception d’un bloc de couleur rouge dont les dimensions sont définies pour la largeur et la hauteur de la div. Le bloc rouge est probablement en haut à gauche de la page, à moins que vous laissiez aller votre imagination et que vous lui donniez plus de css pour l'afficher ailleurs. Vous pensez peut-être que "alors quoi, c'était assez évident", mais ce qui pourrait ne pas l'être aussi, c'est pourquoi vous voyez un bloc rouge au-dessus d'un fond bleu. Pourquoi voyez-vous la div au-dessus de l'élément html? La raison en est que les deux suivent les règles d'ordre d'empilement. Dans le cas de cet exemple simple, les règles indiquent que les blocs descendants du flux normal (le div) sont situés à un niveau supérieur aux fonds et aux bordures de l'élément racine (l'élément html). Vous voyez la div en haut parce que c'est sur un niveau d'empilement plus élevé. Bien que l’exemple ci-dessus ne contienne qu’une pile à deux niveaux, il existe sept niveaux possibles sur chaque contexte d'empilement, énumérés ci-dessous. Ces sept niveaux constituent les règles de classement. Un élément du niveau sept s'affichera au-dessus (plus près du spectateur) que les éléments des niveaux un à six. Un élément du niveau cinq s'affiche au-dessus d'un élément du niveau deux. Un élément sur… eh bien vous avez l'idée. La première fois que j’ai rencontré les règles d’empilement ci-dessus, quelques éléments m’ont marqué. Si vous ne regardez que les niveaux deux, six et sept (ceux où z-index est mentionné), cela correspond à ce que vous supposez probablement à propos de z-index. L'indice z positif est à un niveau supérieur à 0, ce qui est supérieur à l'indice z négatif. C’est probablement là où la plupart d’entre nous arrêtons de penser à toutes ces couches d’empilement, bien que. Avant ces règles, j'aurais supposé que tout le reste était équivalent à un z-index de 0. De toute évidence, ce n'est pas le cas. En fait, presque tout se situe à un niveau inférieur au z-index = 0. Ce qui est également intéressant, c'est que les éléments non positionnés sont situés à quatre niveaux d'empilement différents. C'est logique quand on y pense. Si tous les éléments non positionnés se trouvaient au même niveau d'empilement, nous ne verrions pas de texte (boîte en ligne) au-dessus d'un div (zone de niveau bloc).. Quelques fois, j'ai mentionné la création de nouveaux contextes d'empilement. Lorsque vous affectez une valeur z-index autre que Pensons à nouveau des tables en tant que contextes d'empilement. Auparavant, nous avions une table et sur le dessus, quatre blocs, une assiette de verre et un bol de fruits. Imaginez que la deuxième table que nous avons présentée comporte également quatre blocs de la même taille et une plaque de verre sur le dessus, mais pas de bol de fruits. Vous vous attendez à ce que le bol de fruits de la table 1 soit l'élément le plus haut de la pièce. Il se situe au plus haut niveau (il a le plus grand z-index). Mais que se passerait-il si nous avions déplacé la table 1 et tout ce qui s’y trouvait au sous-sol? Ce bol de fruits serait maintenant inférieur à tout ce qui se trouve sur la table deux, car la table 1 a été déplacée à un niveau inférieur à la table deux.. La même chose se produit avec des éléments positionnés sur une page Web. Considérez le balisage et le style ci-dessous. Volonté HTML: CSS: Même si div.two a le plus grand z-index (100), il se trouve en dessous de div.four (z-index = 50) sur la page. Vous pouvez voir le résultat du code ci-dessus dans l'image ci-dessous. Les bordures noire et jaune montrent les différents contextes d'empilement dans lesquels se trouve chaque élément.. Puisque div.two est contenu dans div.one, son z-index est relatif à Ce que nous avons fait est déplacé Si vous êtes comme moi, cela vous a probablement fait trébucher une ou deux fois lorsque vous travaillez avec z-index. Espérons que ces exemples aident à comprendre pourquoi un élément avec un plus grand index z finit parfois par apparaître derrière un autre élément avec un plus faible index z. Lorsque vous la rencontrez pour la première fois, la propriété z-index semble être une propriété très simple à comprendre. Les valeurs représentent un emplacement sur un axe dans et hors de l'écran, et c'est tout. Un examen plus approfondi de l'index z révèle qu'il se passe un peu plus dans les coulisses. Il existe des contextes d'empilement, des niveaux d'empilement et des règles permettant de déterminer quel élément affiche le plus haut ou le plus bas dans l'ordre d'empilement.. Les éléments positionnés peuvent créer de nouveaux contextes d'empilement et des niveaux d'empilement entiers s'afficheront au-dessus ou au-dessous de tous les niveaux dans un autre contexte d'empilement.., , , etc., vous trouverez sur chaque page Web un seul
Les sept niveaux sur un contexte d'empilement
Mettre tous ensemble
auto à un élément vous créez un nouveau contexte d'empilement, indépendant des autres contextes d'empilement.div.two afficher ci-dessus ou ci-dessous div.four?div width: 200px; hauteur: 200px; rembourrage: 20px; .one, .two, .three, .four position: absolute; .one background: # f00; contour: 5px solide # 000; en haut: 100px; à gauche: 200px; z-index: 10; .two background: # 0f0; contour: 5px solide # 000; en haut: 50 px; à gauche: 75px; z-index: 100; .three background: # 0ff; contour: 5px solide # 000; en haut: 125 px; à gauche: 25px; z-index: 150; .four background: # 00f; contour: 5px solide # ff0; en haut: 200px; à gauche: 350px; z-index: 50;
div.oneest la pile. En réalité, ce que nous avons vraiment est le suivant:
div.one et tout ce qu'il contient ci-dessous div.four. Peu importe les valeurs que nous définissons sur la propriété z-index des éléments à l'intérieur div.one ils seront toujours affichés ci-dessous div.four.
Conclusion
Lectures complémentaires
Accentsconagua