From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/z-index/index.html | 144 ++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/fr/web/css/z-index/index.html (limited to 'files/fr/web/css/z-index/index.html') diff --git a/files/fr/web/css/z-index/index.html b/files/fr/web/css/z-index/index.html new file mode 100644 index 0000000000..854cf50eff --- /dev/null +++ b/files/fr/web/css/z-index/index.html @@ -0,0 +1,144 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

La propriété z-index définit le « z-order » (NdT : « ordre z » n'est pas usité) d'un élément positionné et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec display: flex). Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  z-index est supérieure à celle du deuxième élément.

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

Pour les boîtes positionnées (celles pour lesquelles position est différent de static), la propriété z-index définit :

+ +
    +
  1. Le niveau de la boîte dans la pile par rapport au contexte d'empilement courant
    2. +
  2. Si la boîte crée un contexte d'empilement local.
    3. +
+ +

L'exemple ci-avant illustre l'impact de z-index. À gauche, on a dessiné trois boîtes qui se chevauchent avec un positionnement absolu. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à z-index.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+z-index: auto;
+
+/* valeurs entières */
+/* type <integer> */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+  /* On peut avoir des
+   valeurs négatives pour
+   réduire la propriété */
+z-index: -1;
+
+/* Valeurs globales */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

La propriété z-index se définit grâce au mot-clé auto ou grâce à une valeur entière (<integer>).

+ +

Valeurs

+ +
+
auto
+
La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.
+
<integer>
+
L'entier fourni (type {{cssxref("<integer>")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est 0. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div class="boite-tirets">Boîte tirets
+  <span class="boite-doree">Boîte dorée</span>
+  <span class="boite-verte">Boîte verte</span>
+</div>
+
+ +

CSS

+ +
.boite-tirets {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.boite-doree {
+  position: absolute;
+  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.boite-verte {
+  position: absolute;
+  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', '550', '200', '')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}}{{Spec2('CSS3 Transitions')}}Définit z-index comme pouvant être animé.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.z-index")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf