Apprendre les mises en page CSS
Pour des mise en page plus complexes, nous devons parler de la propriété CSS position. Elle a plusieurs valeurs possibles, et leurs noms n'ont aucun sens et sont impossible à retenir. Voyons-les une par une, mais peut-être devriez-vous ajouter cette page à vos favoris.
.static {
position: static;
}
static est la valeur par défaut de tous les éléments. Un élément avec position: static; n'est positionné d'aucune manière spéciale. Un élément static est dit non positionné et un élément avec une propriété position ayant une valeur autre que static est dit positionné.
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative se comporte de la même façon que static sauf si vous ajoutez quelques propriétés en plus.
Ajouter les propriétés top, right, bottom et left à un élément positionné en relative va le placer ailleurs que sa position normale. Le reste du contenu ne sera pas ajusté pour prendre la place dans l'espace laissé par l'élément.
Bonjour ! Ne faites pas attention à moi pour l'instant.
</div>
Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu'il reste toujours à la même place même si la page défile. De la même manière qu'avec un élément positionné en relative, nous pouvons utiliser les propriétés top, right, bottom et left.
Je suis sûr que vous avez remarqué cet élément fixe dans le coin en bas à droite de la page. Je vous autorise à le regarder maitenant. Voici le CSS qui l'a placé là.
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}Un élément positionné en fixed ne laisse aucun espace dans la page là où il aurait normallement dû se trouver.
Les navigateurs mobiles ont, étonnement, un support très approximatif de la valeur fixed. Apprenez en plus ici.
absolute est la valeur la plus délicate. absolute se comporte comme fixed sauf que son positionnement est relatif à l'élément parent positionné le plus proche au lieu d'être relatif à la fenêtre du navigateur. Si un élément positionné en absolute n'à aucun élément parent positionné, il utilise le corps du document et se déplace avec le document au défilement de la page. N'oubliez-pas qu'un élément "positionné" est un élément dont la position est tout sauf static.
Voici un exemple simple :
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
Cet élément est positionné en relative. S'il était positionné en position: static; son élément enfant positionné en absolute s'échapperait et serait positionné de manière relative au corps du document.
Cet élément est positionné en absolute. Sa position est relative à son parent.
</div>
C'est difficile, mais c'est essentiel pour créer d'excellentes mise en page. Dans la page suivante nous utiliserons la propriété position de manière plus pratique.
