Cours CSS flottement et positionnement

Tuto CSS flottement et positionnement, tutoriel & guide de travaux pratiques en pdf.

Flottement et positionnement

Le flottement et le positionnement sont des outils permettant une mise en page complexe : mise en forme en colonnes, chevauchement d’éléments, etc. Le positionnement consiste à préciser où doivent apparaître des éléments de manière relative, par rapport à un autre élément ou encore par rapport à la fenêtre du navigateur. Le flottement n’est pas vraiment un positionnement : les éléments dits flottants sont pris dans le ux et les autres éléments les contournent.
Le flottement est défini par la propriété float qui peut prendre les valeurs : I left : l’élément sera contourné par la droite. I right : l’élément sera contourné par la gauche I none : valeur par défaut, sert principalement pour écraser un style existant. Tout bloc (image, texte, etc.) peut être déni comme un élément flottant. Il existe une dizaine de règles précises qui gouvernent le comportement des éléments flottants.
La propriété clear indique quels côtés d’un élément ne doivent pas être adjacents à un élément flottant. Elle peut prendre les valeurs : I left : l’élément se positionne en-dessous de tout élément flottantà gauche. I right : l’élément se positionne en-dessous de tout élément flottant à droite. I both : l’élément se positionne en-dessous de tout élément flottant I none : valeur par défaut, sert principalement pour écraser un style existant.
Flottement et Positionnement Positionnement
Le positionnement est précisé par la propriété position. Il existe 4 modes de positionnement : relative, absolute, fixed et static. Chaque type a ses propres règles. Les boîtes peuvent utiliser différents schémas et interférer entre elles.
Flottement et Positionnement Positionnement statique et relatif
Le positionnement static est le comportement par défaut : I l’élément est une boîte rectangulaire faisant partie du ux i.e. l’ordre des déclarations contenues dans le code source est respecté. Le positionnement relative permet de décaler un élément d’une certaine distance.