indice z

Propriété CSS z-index définit l'ordre des éléments lorsqu'ils se chevauchent lorsqu'ils sont positionnés. Autrement dit, vous pouvez l'utiliser pour spécifier quel élément (calque) sera au-dessus et lequel (et dans quel ordre) sera en dessous.

Mais ce n'est pas si simple. Cette propriété est l'une des rares en CSS à remplir simultanément deux fonctions complètement différentes (telles que la position) :

1. La propriété z-index est utilisée pour organiser les éléments positionnés.
2. Chaque élément avec un z-index différent de auto crée nouveau niveau l'ordre, par rapport auquel il (l'ordre) se produit pour tous ses descendants (naturellement, les descendants dont le z-index n'est pas égal à auto créent déjà leur propre niveau d'ordre). C'est pourquoi, par exemple, un élément d'un niveau d'ordre ne peut pas être « placé » entre deux éléments d'un autre.
3. Élément racine crée un niveau de classement racine, même s'il n'a pas de z-index spécifié.

Regardons cet exemple :

Dans cet exemple, pour toute valeur numérique de z-index, vous ne pourrez échanger que DIV3 et DIV4. Mais ce qui suit ne fonctionnera pas :

1. Il ne sera pas possible de mettre DIV3 et DIV4 sous DIV2, puisqu'ils sont sur différents niveaux commande. DIV2 se trouve au niveau créé par l'élément DIV1, et DIV3 et DIV4 sont au niveau créé par DIV2. Pour qu'ils soient au même niveau, vous devez supprimer le z-index de DIV2 ou le définir sur auto .
2. Cela ne fonctionnera pas de mettre DIV2 sous DIV1. Pour que cela fonctionne, vous devez déjà définir auto sur DIV1.
3. Et ainsi de suite...

Dans différents manuels et ouvrages de référence, le concept de « niveau d'ordre » est appelé différemment - contexte positionnel local, contexte de pile locale, etc. Dans la spécification CSS officielle, il est écrit comme « contexte d'empilement local ». Mais à mon avis, l'expression « niveau d'ordre » est plus facile à comprendre pour la plupart des russophones, c'est pourquoi j'ai introduit cette définition.

Type de propriété

Objectif : positionnement.

S'applique aux éléments ayant une position autre que statique.

Hérité : non.

Valeurs

La valeur de la propriété z-index consiste à spécifier l'ordre des éléments de l'une des manières suivantes.

• Nombre- tout entier positif ou négatif qui spécifie l'ordre des éléments dans un niveau de classement donné. Un élément de valeur supérieure sera placé au-dessus de ceux de valeur inférieure. Si deux éléments ont les mêmes valeurs, alors celui du dessous dans le code HTML sera en haut. De plus, un élément qui a une valeur numérique (y compris 0) crée un nouveau niveau de classement pour ses enfants positionnés.
• auto- avec cette valeur, l'élément du niveau de classement actuel a le même z-index que son ancêtre qui a créé ce niveau. Cependant, l'élément lui-même ne crée pas de nouveau niveau d'ordre pour ses descendants. S'il y a plusieurs éléments avec une valeur donnée, alors celui qui apparaît en bas dans le code HTML de la page sera en haut.
• hériter- hérite de la valeur z-index de l'élément parent.

Saisie du pourcentage : n'existe pas.

Valeur par défaut : auto.

Étant donné qu'à l'intérieur de l'élément qui crée le niveau de classement, il peut y avoir non seulement des éléments positionnés, mais aussi d'autres, les navigateurs utilisent certaines règles pour les superposer au sein d'un niveau donné :

1. Le premier calque contient l'arrière-plan et le cadre de l'élément qui a créé ce niveau d'ordre.
2. Au-dessus, dans la deuxième couche, se trouvent les éléments descendants qui ont des valeurs d'indice z négatives, où l'élément avec une valeur plus proche de zéro est situé au-dessus.
3. La couche suivante est constituée d'éléments descendants qui ne sont pas intégrés (en ligne).
4. La quatrième couche est constituée d'éléments flottants (float) ainsi que de leur contenu.
5. La cinquième couche est constituée d'éléments descendants intégrés.
6. La sixième couche contient des éléments avec z-index auto ou 0, où l'élément ci-dessous dans le code est plus élevé.
7. Enfin, les éléments avec des valeurs d'indice z positives se trouvent tout en haut, l'élément avec la valeur la plus élevée étant plus élevé.

Syntaxe

z-index : auto | numéro | hériter

Exemple CSS : utilisation de z-index

Résultat.

Versions CSS

Navigateurs

Internet Explorer 6.0 et 7.0 ne comprennent pas la valeur héritée. Également dans ces navigateurs, de nouveaux niveaux de classement sont créés par tous les éléments positionnés, et pas seulement ceux comportant des valeurs numériques d'index z.

IE 6.0 positionne toujours l'élément au-dessus de tous les éléments de la page, quelles que soient les valeurs du z-index.

Firefox 2.0 empile les éléments avec des valeurs d'index z négatives sous l'arrière-plan et la bordure de l'élément qui a créé ce niveau d'arrangement. En d’autres termes, cela inverse les points 1 et 2 dans les règles de superposition.

La leçon d'aujourd'hui, comme celle d'hier, vous parlera du positionnement en CSS, ainsi que d'une propriété très intéressante appelée z-index.

En utilisant cette propriété, vous pouvez placer des blocs de texte (et pas seulement du texte) les uns sur les autres, tout en obtenant quelque chose comme un effet 3D.

Cette leçon sera très utile pour les débutants en conception de sites Web, car en plus des informations théoriques, nous examinerons également un exemple pratique.

Pour plus de clarté, regardez les deux images ci-dessous :

"Positionnement relatif"

"Positionnement absolu"

Comme vous pouvez le voir, avec le positionnement relatif, le bloc de texte est placé par rapport au paragraphe de texte. Lorsqu'il est absolu - par rapport à la fenêtre du navigateur.

Le fonctionnement de cette propriété est plus simple à expliquer avec une image :

L'élément ayant une valeur plus élevée sera placé au-dessus.

Examinons maintenant de plus près notre démo.

Création du 1er bloc

Couche 1

#couche1 (
arrière-plan : #707070 ;
couleur :#fff ;
position : relative ;
largeur : 800 px ;
hauteur : 450 px ;
}

En utilisant des styles, nous donnons à ce bloc un positionnement relatif. Grâce à cela, nous pouvons placer des blocs supplémentaires à l'intérieur.

Création du 2ème bloc

Par analogie avec le 1er bloc, on crée un bloc. Ce bloc ne diffère que par son identifiant (id="layer2").

Couche 2

Lorem Ipsum est simplement un texte factice d'impression et de composition
industrie. Lorem Ipsum est le texte factice standard de l'industrie
depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de caractères
et je l'ai brouillé pour en faire un livre de spécimens de caractères. Il n'a pas survécu
cinq siècles seulement, mais aussi le saut dans la composition électronique,
restant essentiellement inchangé. Il a été popularisé dans les années 1960
avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum,
et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus
PageMaker incluant des versions de Lorem Ipsum.

#couche2 (
arrière-plan :#f9ad81 ;
couleur :#fff ;
position : absolue ;
haut : 40 px ;
gauche : 50 px ;
largeur : 400 px ;
hauteur : 400 px ;
indice z : 1 ;
}

Nous donnons au deuxième bloc un positionnement absolu. Désormais, il sera définitivement à l'intérieur du premier et n'ira nulle part. De plus, nous définissons l'attribut z-index (=1). Cela signifie que le bloc n°2 sera situé au dessus du premier.

Création du 3ème bloc

Couche 3

Lorem Ipsum est simplement un texte factice d'impression et de composition
industrie. Lorem Ipsum est le texte factice standard de l'industrie
depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de caractères
et je l'ai brouillé pour en faire un livre de spécimens de caractères. Il n'a pas survécu
cinq siècles seulement, mais aussi le saut dans la composition électronique,
restant essentiellement inchangé. Il a été popularisé dans les années 1960
avec la sortie de feuilles Letraset contenant des passages du Lorem Ipsum,
et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus
PageMaker incluant des versions de Lorem Ipsum.

#couche3 (
arrière-plan : #6dcff6 ;
couleur :#fff ;
position : absolue ;
haut : 80 px ;
gauche : 100 px ;
largeur : 600 px ;
hauteur : 200 px ;
indice z : 2 ;
}

Dans ce bloc z-index = 2.

Vous pouvez essayer d'échanger les index de bloc et voir le résultat.

N'oubliez pas qu'un élément avec un z-index inférieur sera toujours en dessous d'un élément avec un z-index plus élevé. Autrement dit, vous pouvez attribuer au bloc n° 1 un indice = 999 et au bloc n° 2 - 1000. Le résultat sera le même.

C'est tout pour aujourd'hui ! Merci de votre attention !

Brèves informations

Versions CSS

CSS1	CSS2	CSS2.1	CSS3

Description

Tous les éléments positionnés sur une page Web peuvent être empilés les uns sur les autres dans un ordre spécifique, simulant ainsi une troisième dimension perpendiculaire à l'écran. Chaque élément peut être en dessous ou au-dessus d'autres objets de la page Web, leur placement le long de l'axe z est contrôlé par z-index . Cette propriété ne fonctionne que pour les éléments dont la valeur de position est absolue , fixe ou relative .

Syntaxe

z-index : nombre | automobile | hériter

Valeurs

Des nombres entiers (positifs, négatifs et zéro) sont utilisés comme valeurs. Plus la valeur est élevée, plus l'élément est élevé par rapport aux éléments qui ont une valeur inférieure. Si la valeur du z-index est égale, l'élément au premier plan est celui décrit ci-dessous dans le code HTML. Bien que la spécification autorise l'utilisation de valeurs d'indice z négatives, ces éléments ne sont pas affichés dans Navigateur Firefox jusqu'à la version 2.0 incluse.

Sauf valeurs numériques auto est utilisé - l'ordre des éléments dans ce cas est construit automatiquement en fonction de leur position dans le code HTML et de leur appartenance au parent, puisque les éléments enfants ont le même numéro que leur élément parent. La valeur d'héritage indique qu'elle est héritée du parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Couche 1 au dessus

Couche 1

Couche 2

Couche 4 sur le dessus

Couche 3

Couche 4

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Application de la propriété z-index

Modèle objet

document.getElementById("elementID ").style.zIndex

Navigateurs

Liste créée à l'aide de la balise

, V Navigateur Internet Explorer 6 apparaît toujours au-dessus des autres éléments, quelle que soit la valeur du z-index.

Les versions d'Internet Explorer jusqu'à 7.0 inclus ne prennent pas en charge la valeur d'héritage et interprètent auto comme 0.

Dans les versions du navigateur Firefox jusqu'à la version 2.0 incluse, une valeur d'index z négative positionne l'élément sous l'arrière-plan de la page Web et de son contenu.

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 :

Vous trouverez ci-dessous le code HTML avec une conception CSS de base.

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:

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 :

Tout élément dans 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 « spécifier 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 ce 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

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

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 :

Vous trouverez ci-dessous le code HTML avec une conception CSS de base.

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:

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 :

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 « spécifier 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 ce 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

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