convert content to md

1 files changed, 92 insertions, 113 deletions

diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md
index c07040d0aa..ed3aa1d772 100644
--- a/files/fr/web/css/top/index.md
+++ b/files/fr/web/css/top/index.md
@@ -8,33 +8,32 @@ tags:
   - Reference
 translation_of: Web/CSS/top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>top</code></strong> définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.</p>
+La propriété **`top`** définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.
 
-<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/top.html")}}
 
-<p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p>
+L'effet de la propriété `top` dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :
 
-<ul>
- <li>Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}<code>: absolute</code> ou {{cssxref("position")}}<code>: fixed</code>), cette propriété définit la distance entre le bord haut de la marge (<em>margin</em>) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait <code>position: relative</code>).</li>
- <li>Lorsque <code>position</code> vaut <code>relative</code>, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.</li>
- <li>Lorsque <code>position</code> vaut <code>sticky</code>, la propriété <code>top</code> se comporte comme avec <code>relative</code> lorsque l'élément se situe à l'intérieur de la zone d'affichage (<em>viewport</em>) et elle se comporte comme <code>fixed</code> lorsque l'élément est à l'extérieur de la zone d'affichage.</li>
- <li>Lorsque <code>position</code> vaut <code>static</code>, la propriété <code>top</code> n'a aucun effet.</li>
-</ul>
+- Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}`: absolute` ou {{cssxref("position")}}`: fixed`), cette propriété définit la distance entre le bord haut de la marge (_margin_) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait `position: relative`).
+- Lorsque `position` vaut `relative`, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.
+- Lorsque `position` vaut `sticky`, la propriété `top` se comporte comme avec `relative` lorsque l'élément se situe à l'intérieur de la zone d'affichage (_viewport_) et elle se comporte comme `fixed` lorsque l'élément est à l'extérieur de la zone d'affichage.
+- Lorsque `position` vaut `static`, la propriété `top` n'a aucun effet.
 
-<p>Lorsque <code>top</code> et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas <code>auto</code> ou <code>100%</code>, les distances introduites par <code>top</code> et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété <code>top</code> prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.</p>
+Lorsque `top` et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas `auto` ou `100%`, les distances introduites par `top` et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété `top` prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 top: 3px;
 top: 2.4em;
 
 /* Valeur en pourcentages */
 /* Relative à la hauteur du bloc englobant */
-/* Type &lt;percentages&gt; */
+/* Type <percentages> */
 top: 10%;
 
 /* Avec un mot-clé */
@@ -44,48 +43,48 @@ top: auto;
 top: inherit;
 top: initial;
 top: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
- <ul>
-  <li>La distance depuis le bord haut du bloc englobant pour les <em>éléments positionnés de façon absolue</em></li>
-  <li>Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour <em>les éléments positionnés de façon relative</em>.</li>
- </ul>
- </dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui représente :
- <ul>
-  <li>Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite <code>height: auto</code> comme une hauteur basée sur le contenu. Si <code>bottom</code>vaut également <code>auto</code>, l'élément est positionné verticalement comme s'il avait été un élément statique.</li>
-  <li>Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si <code>bottom</code> vaut également <code>auto</code>, aucun décalage n'est appliqué.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+
+  - : Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
+
+    - La distance depuis le bord haut du bloc englobant pour les _éléments positionnés de façon absolue_
+    - Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour _les éléments positionnés de façon relative_.
+
+- `<percentage>`
+  - : Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui représente :
+
+    - Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite `height: auto` comme une hauteur basée sur le contenu. Si `bottom`vaut également `auto`, l'élément est positionné verticalement comme s'il avait été un élément statique.
+    - Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si `bottom` vaut également `auto`, aucun décalage n'est appliqué.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+### Positionnement relatif
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-  &lt;p class="relatif"&gt;Lorem ipsum et tralala relatif&lt;/p&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p>Lorem ipsum et tralala normal</p>
+  <p class="relatif">Lorem ipsum et tralala relatif</p>
+  <p>Lorem ipsum et tralala normal</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: 2px black dashed;
 }
 
@@ -94,26 +93,28 @@ p.relatif {
   top: 5em;
   border: 2px black solid
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
+{{EmbedLiveSample("Positionnement_relatif","100%","200")}}
 
-<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+### Positionnement absolu
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-  &lt;p class="absolu"&gt;Lorem ipsum et tralala absolu&lt;/p&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p>Lorem ipsum et tralala normal</p>
+  <p class="absolu">Lorem ipsum et tralala absolu</p>
+  <p>Lorem ipsum et tralala normal</p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: 2px black dashed;
 }
 
@@ -121,54 +122,32 @@ p.absolu {
   position: absolute;
   top: 5em;
   border: 2px black solid;
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>top</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Description du comportement pour le positionnement adhérent (<em>sticky</em>)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.top")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("bottom")}}</li>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("left")}}</li>
- <li>{{cssxref("right")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement">Les bases de CSS : la disposition et le positionnement</a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                | État                                     | Commentaires                                                           |
+| ---------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'top')}} | {{Spec2('CSS3 Transitions')}} | `top` peut désormais être animée.                                      |
+| {{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}     | {{Spec2('CSS3 Positioning')}} | Description du comportement pour le positionnement adhérent (_sticky_) |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.top")}}
+
+## Voir aussi
+
+- {{cssxref("position")}}
+- {{cssxref("bottom")}}
+- {{cssxref("height")}}
+- {{cssxref("left")}}
+- {{cssxref("right")}}
+- [Les bases de CSS : la disposition et le positionnement](/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement)