Revamp page translation - fixes #2670 (#2710)

1 files changed, 32 insertions, 33 deletions

diff --git a/files/fr/web/css/z-index/index.md b/files/fr/web/css/z-index/index.md
index 78571de235..e4de5b9c8c 100644
--- a/files/fr/web/css/z-index/index.md
+++ b/files/fr/web/css/z-index/index.md
@@ -1,25 +1,20 @@
 ---
 title: z-index
 slug: Web/CSS/z-index
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/z-index
+browser-compat: css.properties.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é](/fr/docs/Web/CSS/position) 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.
+La propriété **`z-index`** définit le « _z-order_ » (NdT : « ordre z » n'est pas usité) d'un élément [positionné](/fr/docs/Web/CSS/position) et de ses éléments enfants ou de ses éléments flexibles. 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 :
+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](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) courant
+1.  Le niveau de la boîte dans la pile par rapport [au contexte d'empilement](/fr/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) courant
 2.  Si la boîte crée un contexte d'empilement local.
 
-L'exemple ci-avant illustre l'impact de `z-index`. À gauche, on a dessiné trois boîtes qui se chevauchent avec [un positionnement absolu](/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning). 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
 
 ```css
@@ -31,14 +26,12 @@ z-index: auto;
 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;
+z-index: -1; /* Valeurs négatives possibles pour indiquer une priorité inférieure */
 
 /* Valeurs globales */
 z-index: inherit;
 z-index: initial;
+z-index: revert;
 z-index: unset;
 ```
 
@@ -49,26 +42,37 @@ La propriété `z-index` se définit grâce au mot-clé [`auto`](#auto) ou grâc
 - `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("&lt;integer&gt;")}}) 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.
+  - : L'entier fourni (type [`&lt;integer&gt;`](/fr/docs/Web/CSS/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.
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### HTML
+### Empiler des éléments visuellement
+
+#### HTML
 
 ```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 class="wrapper">
+  <div class="boite-tirets">Boîte avec tirets</div>
+  <div class="boite-doree">Boîte dorée</div>
+  <div class="boite-verte">Boîte verte</div>
 </div>
 ```
 
-### CSS
+#### CSS
 
 ```css
+.wrapper {
+  position: relative;
+}
+
 .boite-tirets {
   position: relative;
   z-index: 1;
@@ -79,7 +83,7 @@ La propriété `z-index` se définit grâce au mot-clé [`auto`](#auto) ou grâc
 }
 .boite-doree {
   position: absolute;
-  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
+  z-index: 3; /* place .boite-doree au-dessus de .boite-verte et .boite-tirets */
   background: gold;
   width: 80%;
   left: 60px;
@@ -87,7 +91,7 @@ La propriété `z-index` se définit grâce au mot-clé [`auto`](#auto) ou grâc
 }
 .boite-verte {
   position: absolute;
-  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
+  z-index: 2; /* place .boite-verte au-dessus de .boite-tirets */
   background: lightgreen;
   width: 20%;
   left: 65%;
@@ -97,24 +101,19 @@ La propriété `z-index` se définit grâce au mot-clé [`auto`](#auto) ou grâc
 }
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample('Exemple', '550', '200', '')}}
+{{EmbedLiveSample('Empiler_des_éléments_visuellement', '550', '200', '')}}
 
 ## Spécifications
 
-| Spécification                                                                                                                    | État                                     | Commentaires                                |
-| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------- |
-| {{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}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.z-index")}}
+{{Compat}}
 
 ## Voir aussi
 
-- La propriété CSS {{cssxref("position")}}
-- [Comprendre le fonctionnement de `z-index`](/fr/docs/Web/CSS/Comprendre_z-index)
+- La propriété CSS [`position`](/fr/docs/Web/CSS/position)
+- [Comprendre le fonctionnement de `z-index`](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index)