aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/top/index.html
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:58:15 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit149319bb8c7b1394a443f0877c3460cd362aa815 (patch)
treed534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/top/index.html
parenteb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff)
downloadtranslated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz
translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2
translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/top/index.html')
-rw-r--r--files/fr/web/css/top/index.html174
1 files changed, 0 insertions, 174 deletions
diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html
deleted file mode 100644
index c07040d0aa..0000000000
--- a/files/fr/web/css/top/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: top
-slug: Web/CSS/top
-tags:
- - CSS
- - Positionnement
- - Propriété
- - Reference
-translation_of: Web/CSS/top
----
-<div>{{CSSRef}}</div>
-
-<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>
-
-<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
-
-<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>
-
-<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>
-
-<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>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css">/* Valeur de longueur */
-/* Type &lt;length&gt; */
-top: 3px;
-top: 2.4em;
-
-/* Valeur en pourcentages */
-/* Relative à la hauteur du bloc englobant */
-/* Type &lt;percentages&gt; */
-top: 10%;
-
-/* Avec un mot-clé */
-top: auto;
-
-/* Valeur globale */
-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>
-
-{{csssyntax}}
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Positionnement_relatif">Positionnement relatif</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<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>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">div {
- border: 2px black dashed;
-}
-
-p.relatif {
- position: relative;
- top: 5em;
- border: 2px black solid
-}
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
-
-<h3 id="Positionnement_absolu">Positionnement absolu</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<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>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">div {
-  border: 2px black dashed;
-}
-
-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>