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/top/index.html | 178 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/fr/web/css/top/index.html (limited to 'files/fr/web/css/top/index.html') diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html new file mode 100644 index 0000000000..64d8a462c4 --- /dev/null +++ b/files/fr/web/css/top/index.html @@ -0,0 +1,178 @@ +--- +title: top +slug: Web/CSS/top +tags: + - CSS + - Positionnement + - Propriété + - Reference +translation_of: Web/CSS/top +--- +
{{CSSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/css/top.html")}}
+ + + +

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")}}) :

+ + + +

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.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length> */
+top: 3px;
+top: 2.4em;
+
+/* Valeur en pourcentages */
+/* Relative à la hauteur du bloc englobant */
+/* Type <percentages> */
+top: 10%;
+
+/* Avec un mot-clé */
+top: auto;
+
+/* Valeur globale */
+top: inherit;
+top: initial;
+top: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur négative, nulle ou positive du type {{cssxref("<length>")}} 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("<percentage>")}} 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 bottomvaut é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}}
+ +

Exemples

+ +

Positionnement relatif

+ +

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>
+ +

CSS

+ +
div {
+  border: 2px black dashed;
+}
+
+p.relatif {
+  position: relative;
+  top: 5em;
+  border: 2px black solid
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Positionnement_relatif","100%","200")}}

+ +

Positionnement absolu

+ +

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>
+
+ +

CSS

+ +
div {
+  border: 2px black dashed;
+}
+
+p.absolu {
+  position: absolute;
+  top: 5em;
+  border: 2px black solid;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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

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