Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

top, right, bottom, left

top, right, bottom, left.

Ces quatre propriétés définissent la position d'un élément dans le cas où cet élément est positionné. Un élément est dit "positionné" lorsqu'il est sorti de la séquence normale d'affichage, c'est à dire lorsque sa propriété position est différente de static (voir la propriété position).

  • position:static : les 4 propriétés n'ont aucun effet. La position de l'élément est déterminée par son ordre d'apparition dans le code et par ses marges.
  • position:fixed ou absolute : les 4 propriétés définissent la position de l'élément par rapport au dernier parent positionné.
  • position:relative : Les 4 propriétés définissent la position de l'élément par rapport à l'emplacement qu'il aurait eu s'il n'était pas positionné.
  • position:sticky : les 4 propriétés se comportent comme si la position était relative tant que l'élément est dans le viewport et comme si la position était fixed quand l'élément atteint le bord du viewport pendant un défilement de la page. Autrement dit, les éléments sticky restent toujours visibles sur l'écran.

top, right, bottom et left définissent l'espace entre le bord de l'élément parent de référence et la marge correspondante de l'élément positionné, comme le montre le schéma ci-dessous :

Propriétés CSS top, right, bottom et left

Les deux propriétés qui agissent dans la même direction (left et right par exemple) peuvent donc entrer en conflit. Voici comment celui-ci est résolu :

  • Si left et right sont fixées et que la largeur de l'élément (width) est libre, l'élément est dimensionné pour satisfaire left et right.
  • Si left et right sont fixées et que la largeur de l'élément est fixée également, la propriété right est ignorée.

On trouve une règle comparable dans le sens vertical : en cas de conflit entre top, bottom et height, c'est le propriété bottom qui est ignorée.

Syntaxes pour top,right,bottom et left.

  • top: auto; right: auto; bottom: auto; left: auto;

    Valeur par défaut. Le navigateur détermine lui-même l'emplacement de l'élément.

  • top: 10px; right: 10px; bottom: 10px; left: 10px;

    L'emplacement de l'élément est fixé en fonction de la valeur indiquée.

    La valeur peut être positive ou négative, dans la mesure où cela ne conduit pas à une impossibilité. Elle doit être suivie d'une unité de dimension (voir les unités de dimensions en CSS).

    Les pourcentages sont évalués par rapport aux dimensions du bloc parent.
    left et right sont évalués par rapport à sa largeur,
    top et bottom par rapport à sa hauteur.

  • top: initial;

    La valeur initiale est auto.

  • top: unset; top: inherit;

    Reportez-vous à la description générale de ces valeurs.

Compatibilité.

Ces quatre propriétés sont correctement traitées par tous les navigateurs actuels.

Voir aussi...

Blocs positionnés - Propriétés.

  • bottom : Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
  • left : Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de son parent.
  • position : Mode de positionnement.
  • right : Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de son parent.
  • z-index : Plan d'affichage (dessus, dessous).