Définit la façon dont l’élément est positionné dans le document [CSS2]
position: static | relative | absolute | fixed | sticky
| Position | Description |
|---|---|
| relative | Déplace l’élément par rapport à sa position initiale |
| absolute | Place l’élément par rappport à un parent en position relative - ou à la page si aucun. L’élément est sorti du flow, les autres éléments agissent comme s’il n’existait pas |
| fixed | Place l’élément par rapport au viewport - sa position reste donc toujours la même, même lorsqu’on scrolle. L’élément est sorti du flow, les autres éléments agissent comme s’il n’existait pas |
| sticky | Élément fixed relativement au parent |
| static | Comportement par défaut |
JSFiddle relative, absolute, fixed
JSFiddle sticky
Permet de placer ou déplacer un élément.
Leur comportement dépend la façon dont l’élément est positionné dans le document avec position.
top
Permet de (dé)placer un élément à partir du haut (vers le bas) [CSS2]
top: <length> | <percentage> | auto
bottom
Permet de (dé)placer un élément à partir du bas (vers le haut) [CSS2]
bottom: <length> | <percentage> | auto
left
Permet de (dé)placer un élément à partir de la gauche (vers la droite) [CSS2]
left: <length> | <percentage> | auto
right
Permet de (dé)placer un élément à partir de la droite (vers la gauche) [CSS2]
right: <length> | <percentage> | auto
Définit la priorité entre deux positionnés en CSS lorsqu’ils se chevauchent (position différente de static) [CSS2]
2 est prioritaire sur 1
Définition:
z-index: <number>
Exemple:
{
position: absolute;
top: 15px;
left: 5px;
z-index: 1;
}
La propriété float a pour effet de décaler un élément vers la droite ou vers la gauche jusqu’à ce qu’il touche le bord de son conteneur ou un autre élément flottant.
Les éléments situés avant le float ne sont pas affectés. Les éléments situé après le float s’adaptent à la position du ou des éléments flottant(s).
Pour que les éléments qui suivent reprennent leur comportement par défaut, utiliser clear.
float rend l’élément “flottant” [CSS1]
float: left | right | none
clear stoppe les effets du float [CSS1]
clear: left | right | both
Exemple:
{
li {
float: left;
list-style-type: none;
}
&::after {
content: "";
display: table;
clear: right;
}
}
Si un élément flottant est plus grand en hauteur que l’élément qui le contient, son contenu va déborder du parent.
Pour parer ce problème, il faut rajouter un élément vide avec clear à la suite du float
(soit en ajoutant un élément vide dans le HTML soit en utilisant la propriété content).
JSFiddle clearfix avec “content”