Prepare CSS section for Markdown conversion (#2307)

* Removes summary / seoSummary classes

* Remove div class=hidden and some notranslate

* Remove hidden paragraphs for live sample

* Remove hidden paragraphs for live sample - take 2

* Remove other hidden div and p - updated w/ en-US when necessary

* Remove ids

* Remove notranslate class

* Fix typo which broke build

* remove div class='index'

* remove useless <span style=...>

* remove non typographical sups

* remove non typographical subs

* remove blockindicator and fix some div.note

* fix build :/

* remove useless classes

* fix build - again :x

* fix unhandled elements 1/N + embedlivesample build fail

* fix div.warning

* Fix fixable flaws - hoping to reduce error conversion

* Remove unecessary images (same as en-US)

* fix div notes

* fix warnings

* fix some dl handling

* fix dls

* Fix a bunch of conversion errors

* rm unhandled figures

* Fix other set of issues and revamp easing-function page

* Fix some one-offs conversion errors (incl. deki files)

* fix the rest of one-off conversion issues

* Fix last dl standing

9 files changed, 40 insertions, 39 deletions

diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html
index 518a4abaeb..7271af1172 100644
--- a/files/fr/web/css/css_positioning/index.html
+++ b/files/fr/web/css/css_positioning/index.html
@@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Positioning
 
 <h3 id="Propriétés">Propriétés</h3>
 
-<div class="index">
 <ul>
  <li>{{cssxref("bottom")}}</li>
  <li>{{cssxref("clear")}}</li>
@@ -27,7 +26,6 @@ translation_of: Web/CSS/CSS_Positioning
  <li>{{cssxref("top")}}</li>
  <li>{{cssxref("z-index")}}</li>
 </ul>
-</div>
 
 <h2 id="Guides">Guides</h2>
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
index e0076181f3..bfbc64fb1c 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
 
 <h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2>
 
-<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
+<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">« empilement sans <code>z-index</code> »</a>,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
 
 <p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p>
 
@@ -36,12 +36,12 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
 </ul>
 
 <div class="note">
-<p><strong>Notes :</strong></p>
+<p><strong>Note :</strong>
 
 <ul>
  <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li>
- <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
-</ul>
+ <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
+</ul></p>
 </div>
 
 <p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p>
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html
index 1f41be9467..92a9a86a4e 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html
@@ -16,7 +16,7 @@ original_slug: Web/CSS/Comprendre_z-index
 <p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p>
 </blockquote>
 
-<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p>
+<p>Source : <a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p>
 
 <p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p>
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
index ef04a825c1..2b0dc727af 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
@@ -37,7 +37,9 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float
  <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li>
 </ol>
 
-<div class="note"><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div>
+<div class="note">
+  <p><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</p>
+</div>
 
 <p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p>
 
@@ -123,12 +125,12 @@ b {
 <h2 id="Voir_aussi"><strong>Voir aussi</strong></h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li>
 </ul>
 
 <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
index ed1138131b..dadbe3ec99 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -16,15 +16,15 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1
 
 <p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p>
 
-<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p>
+<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" src="understanding_zindex_05a.png"></p>
 
 <p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p>
 
-<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p>
+<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" src="understanding_zindex_05b.png"></p>
 
 <p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p>
 
-<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p>
+<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" src="understanding_zindex_05c.png"></p>
 
 <p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p>
 
@@ -39,7 +39,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1
  </li>
 </ul>
 
-<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div>
+<div class="note">
+  <p><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+  </p>
+</div>
 
 <h2 id="Exemple"><strong>Exemple</strong></h2>
 
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
index 161afae998..e4dcfaa383 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
@@ -14,7 +14,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2
 
 <p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p>
 
-<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p>
+<p>{{ EmbedLiveSample('Exemple', '352', '270') }}</p>
 
 <p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p>
 
@@ -35,7 +35,9 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2
  </li>
 </ul>
 
-<div class="note"><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</div>
+<div class="note">
+  <p><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</p>
+</div>
 
 <h2 id="Exemple">Exemple</h2>
 
@@ -122,8 +124,5 @@ span.bold {
 &lt;/div&gt;
 </pre>
 
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemple")}}</p>
 
 <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
index ae2dfa1046..0668f2416a 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
@@ -18,7 +18,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3
 
 <p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p>
 
-<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p>
+<p>{{ EmbedLiveSample('Exemple', '320', '330') }}</p>
 
 <p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p>
 
@@ -54,7 +54,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3
 
 <p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p>
 
-<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div>
+<div class="note">
+  <p><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+  </p>
+</div>
 
 <h2 id="Exemple">Exemple</h2>
 
@@ -154,8 +157,5 @@ div.lev3 {
 &lt;/div&gt;
 </pre>
 
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemple")}}</p>
 
 <div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
index 89eddc49b5..f5c69a0055 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -26,16 +26,16 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index
 <p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p>
 
 <div class="note">
-<p><strong>Notes :</strong></p>
-
+<p><strong>Note :</strong>
 <ul>
  <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li>
  <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li>
  <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li>
 </ul>
+</p>
 </div>
 
-<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p>
+<p>{{EmbedLiveSample("Exemple", 600, 400)}}</p>
 
 <h2 id="Exemple">Exemple</h2>
 
@@ -116,8 +116,4 @@ div {
 }
 </pre>
 
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemple","600","400")}}</p>
-
 <div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
index da1de35a86..a377b3b7ff 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
+++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
 
 <h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2>
 
-<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p>
+<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p>
 
 <p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p>
 
@@ -52,11 +52,13 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
  <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li>
 </ul>
 
-<div class="note"><strong>Notes :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div>
+<div class="note">
+  <p><strong>Note :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</p>
+</div>
 
 <h4 id="Illustration">Illustration</h4>
 
-<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p>
+<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" src="understanding_zindex_04.png"></p>
 
 <p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p>
 
@@ -79,13 +81,14 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
 <p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p>
 
 <div class="note">
-<p><strong>Notes :</strong></p>
+<p><strong>Note :</strong>
 
 <ul>
  <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li>
  <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li>
  <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li>
 </ul>
+</p>
 </div>
 
 <h2 id="Exemple">Exemple</h2>