Les top, bottom, leftet rightpropriétés sont utilisées avec la position pour définir le placement d'un élément. Ils ont uniquement un effet sur les éléments positionnés, qui sont des éléments dont la positionpropriété est définie sur autre chose que static. Par exemple: relative, absolute, fixedou sticky.
div ( : || || auto || inherit; )Vous pouvez l'utiliser, par exemple, pour mettre une icône en place:
button .icon ( position: relative; top: 1px; )Ou placez un élément spécial à l'intérieur d'un conteneur.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )La valeur de top, bottom, leftet rightpeut être un des éléments suivants:
- l'une des longueurs valides de CSS
- un pourcentage de la hauteur (pour
topetbottom) ou de la largeur (pourleftetright) de l'élément contenant autoinherit
L'élément s'éloignera généralement d'un côté donné lorsque sa valeur est positive, et vers lui lorsque la valeur est négative. Dans l'exemple ci-dessous, une longueur positive pour topdéplace l'élément vers le bas (loin du haut) et une longueur négative pour topdéplace l'élément vers le haut (vers le haut):
Voir le Pen
Top: valeurs positives et négatives par Matsuko Friedland (@missmatsuko)
sur CodePen.
Positionner
Le placement d'un élément avec une valeur top, bottom, leftou rightdépend de sa valeur position. Jetons un coup d'œil à ce qui se passe lorsque nous définissons la même valeur pour topsur des éléments avec des valeurs différentes pour position.
static
La toppropriété n'a aucun effet sur les éléments non positionnés (éléments positiondéfinis sur static). C'est ainsi que les éléments sont positionnés par défaut. Vous pouvez utiliser position: static;comme une méthode pour annuler l'effet de topsur un élément.
relative
Lorsque topest défini sur un élément positiondéfini sur relative, l'élément se déplace vers le haut ou vers le bas par rapport à son emplacement d'origine dans le document.
Voir Pen
Top: relatif par Matsuko Friedland (@missmatsuko)
sur CodePen.
absolute
Lorsque topest défini sur un élément positiondéfini sur absolute, l'élément se déplacera vers le haut ou vers le bas par rapport à son ancêtre positionné le plus proche (ou au document, s'il n'y a pas d'ancêtres positionnés).
Dans cette démo, la boîte rose sur la gauche est positionnée à 50 pixels du haut de la page car elle n'a aucun élément ancêtre positionné. La boîte rose sur la droite est positionnée à 50 px du haut de son parent, car le parent a un positionof relative.
Voir le Pen
Top: absolu de Matsuko Friedland (@missmatsuko)
sur CodePen.
fixed
Lorsque topest défini sur un élément positiondéfini sur fixed, l'élément se déplacera vers le haut ou le bas par rapport à la fenêtre du navigateur.
Voir Pen
Top: corrigé par CSS-Tricks (@ css-tricks)
sur CodePen.
À première vue, il peut sembler qu'il n'y a pas de différence entre absoluteet fixed. La différence peut être vue lorsque vous les comparez sur une page qui a suffisamment de contenu pour faire défiler. Lorsque vous faites défiler vers le bas, l' fixedélément de position est toujours visible, tandis que l' absoluteélément de position défile.
Voir le
défilement du stylet : fixe vs absolu par CSS-Tricks (@ css-tricks)
sur CodePen.
sticky
Lorsque topest défini sur un élément positiondéfini sur sticky, l'élément se déplacera vers le haut ou vers le bas par rapport à l'ancêtre le plus proche avec une boîte de défilement (ou la fenêtre, si aucun ancêtre n'a de boîte de défilement), limité aux limites de son élément contenant.
La définition topsur un stickyélément positionné ne fait pas grand-chose à moins que son conteneur ne soit plus grand qu'il ne l'est et que vous ayez suffisamment de contenu pour faire défiler. Comme avec fixed, l'élément restera visible lorsque vous faites défiler. À la différence fixed, l'élément tombera hors de vue une fois qu'il atteindra les bords de son élément conteneur.
Voir le
défilement du stylet : corrigé ou collant par CSS-Tricks (@ css-tricks)
sur CodePen.
Gotchas
Réglage des côtés opposés
Vous pouvez définir une valeur pour chacun top, bottom, leftet rightsur un seul élément. Lorsque vous définissez des valeurs pour les côtés opposés ( topet bottom, ou leftet right), le résultat peut ne pas toujours être celui que vous attendez.
Dans la plupart des cas, bottomest ignoré si topest déjà défini et rightest ignoré si leftest déjà défini. Lorsque la direction est définie sur rtl(de droite à gauche), leftest ignoré à la place de right. Pour que chaque valeur ait un effet, l'élément doit être positiondéfini sur absoluteou fixedet heightdéfini sur auto(par défaut).
Dans cet exemple, nous avons mis top, bottom, leftet rightà `20px`, et nous attendons de chaque côté de la boîte intérieure pour être 20px loin des côtés de la boîte extérieure:
Voir le
réglage du stylet en haut, en bas, à gauche et à droite par CSS-Tricks (@ css-tricks)
sur CodePen.
Lorsqu'il est fixe n'est pas relatif à la fenêtre
Les éléments positiondéfinis sur fixedne sont pas toujours positionnés par rapport à la fenêtre. Il sera positionné par rapport à son ancêtre le plus proche avec un transform, perspectiveou filterensemble de biens à autre chose que none, le cas échéant.
Ajouter ou supprimer de l'espace
Si vous avez positionné un élément et constaté qu'il y a maintenant un espace vide ou pas assez d'espace là où vous vous attendiez, cela peut avoir à voir avec si l'élément est dans ou hors du flux du document.
Lorsqu'un élément est retiré du flux du document, cela signifie que l'espace qu'il occupait à l'origine sur la page disparaît. C'est le cas lorsqu'un élément est positionné absoluteou fixed. Dans cet exemple, la boîte contenant de l'élément positionné de manière absolue s'est réduite car l'élément positionné de manière absolue a été supprimé du flux du document:
Voir le
flux de documents Pen par Matsuko Friedland (@missmatsuko)
sur CodePen.
Prise en charge du navigateur
Vous pouvez jeter un coup d'œil, mais il n'y a pas de problèmes entre navigateurs pour la toppropriété. Utiliser à volonté.