DEVENIR-WEBMASTER.COM Log In
 22
close

Comment positionner des éléments HTML en utilisant la propriété position.

Visiter ma chaine Youtube

# Les valeurs de la propriété position close

La propriété position peut prendre les valeurs suivantes :

# Les propriétés de décalage. close

Ces propriétés spécifient une valeur de décalage par rapport aux bords d'une boîte de référence.

Decalage CSS top et right

Vous choisissez top ou bottom mais pas les deux. Vous choisissez left ou right mais pas les deux.

N'oubliez pas que vous pouvez aussi produire des décalages avec des marges.

# Qu'est ce qu'on appelle un élément positionné ? close

Un élément est positionné si la valeur de sa propriété position n'est pas static.

# La valeur static close

C'est la valeur par défaut de la propriété position. La boîte est dans le flux. Les propriétés de décalage ne sont pas utilisables.

Vous pouvez avoir besoin de la valeur static pour ramener dans le flux une boîte qui en a été sortie. Dans cette démo la boîte est positionnée static lorsque la fenêtre est petite et absolute quand la fenêtre est plus grande.

# La valeur relative close

La boîte est positionnée tout en restant dans le flux. La boîte de référence pour les décalages est celle qui aurait été mise en place par défaut. Les décalages n'influencent pas les autres boîtes et l'espace occupé est le même avec ou sans décalages. Par contre il peut y avoir chevauchement de boîtes. Demo ici.

Une boîte positionnée en relative

Souvent la valeur relative est utilisée pour fabriquer un ancêtre positionné.

# La valeur absolute close

Une boîte qui est positionnée en absolute est sortie du flux. Ça nous donne la possibilité de la superposer à d'autres boîtes. Et c'est là l'intérêt.

Les décalages seront appliqués par rapport à une boîte de référence qui sera soit celle du dernier ancêtre positionné soit celle du body. Donc il vous faudra d'abord "fabriquer" l'ancêtre en plaçant l'élément dans un élément conteneur parent et ensuite il faudra positionner ce parent.

Si vous ne le faîtes pas ce sera le body qui jouera ce rôle sans que vous ayez besoin de le positionner.

Dans cet exemple je place l'image dans son conteneur qui est le header.

Mettre l'image dans son conteneur

L'image est positionnée avec la valeur absolute accompagnée de décalages.

L'image est positionnée en absolute

Et enfin il ne faut pas oublier de positionner le conteneur de manière à en faire un ancêtre positionné.

Le conteneur est positionné

# La valeur fixed close

Une boîte qui est positionnée en fixed est sortie du flux. La boîte de référence pour les décalages est la boîte qui correspond à la fenêtre du navigateur.

Dans cet exemple je superpose une grande boîte placée dans le flux avec une marge gauche et un menu positionné en fixed. L'objectif est bien sûr de pouvoir scroller sans que le menu ne bouge. Ce qui est le cas puisqu'il est en quelques sortes "attaché à la fenêtre".

Un menu positionné avec fixed