Extrait du cours les règles CSS

LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU NOTION DE FLUX
Les navigateurs « lisent » le code et l’interprètent de façon linéaire. Les boîtes viennent naturellement les unes en dessous des autres, comme les paragraphes, les balises d’en-têtes et les listes, et d’autres éléments au contraire, comme les images ou les liens se placent naturellement dans le flux du document.
STATIQUE (PAR DEFAUT)
Ici il y a une boîte verte insérée dans la page, avec les marges de la page par défaut. Puis une deuxième boîte rouge, qui se place par défaut en dessous. Elles contiennent une ligne de texte.
Par défaut les boîtes font 100% de leur conteneur et prennent la hauteur de leur contenu.
RELATIF (DANS LE FLUX) = POSITION : RELATIVE
Il est possible de décaler horizontalement et/ou verticalement les éléments. Ceci peut générer des chevauchements !
Ici la boîte rouge a été « poussée » de 20pixels plus bas que l’élément précédent :
#rouge {
background: red;
position:relative;
top:20px;
}
ABSOLU (HORS DU FLUX) = POSITION : ABSOLUTE
Il est possible de retirer les boîtes du flux normal de la page. Celles-ci n’auront alors aucun effet sur les autres éléments de la page. Elles se placent par rapport à l’élément parent. Si rien n’est précisé, ce sera par rapport à la fenêtre. Les boîtes positionnées en absolu prennent la largeur et la hauteur de leur contenu, sauf si on leur donne des paramètres différents.
Attention cela peut provoquer des chevauchements, comme dans l’exemple ci-dessous. La boîte rouge « ignore » la boîte verte et se positionne à 20 pixels du haut de la fenêtre.
Ici on a simplement changé la position « relative » de la boîte rouge, en « absolute » :
#rouge {
background: red;
position: absolute;
top: 20px;
}
…….

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Cours définition des règles CSS (Cascade, conflits et héritages) (1,19 MO) (Cours PDF)