Il existe 5 méthodes de positionnement des boîtes des éléments HTML : statique, relatif, absolu, fixe et flottant.

Mais quelque soit la méthode utilisée, le positionnement se fait toujours par rapport à un bloc conteneur.

### Principe

Les notions de boîtes (Positionner des éléments -> C'est dans la boîte) et de relations parents/enfants ( Principes généraux -> Document Object Model) vues précédemment doivent être assimilées pour aborder cette partie.

Un document HTML est composé d'éléments qui contiennent d'autres éléments. On retrouve donc des boîtes de type bloc qui contiennent d'autres boîtes (de type bloc et/ou en ligne) et qui sont appelées des blocs conteneurs.

Le bloc conteneur sert à déterminer le positionnement et éventuellement les dimensions des boîtes qu'il contient. Les propriétés de style avec une valeur relative (pourcentage, em, etc.) sont calculées à partir de la valeur correspondante du bloc conteneur.

L'exemple suivant montre l'effet d'une valeur relative de la taille des polices de caractères et de la largeur des boîtes des éléments imbriqués.

Exemple : bloc conteneur et valeurs relatives
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h2>L'Arrière Des Etoiles</h2> <div> <p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force !</strong></p> <p><img src="../exemples/img/yoda1.png"> Télécharger <a href="#">ce tutoriel</a> tu dois.</p> </div> <p> La taille de la police de ce paragraphe n'est pas la même que celle des précédents. </p> </body> </html>
Fichier CSS : styles.css
body { font-size: 16px; /* taille police : 16 pixels */ } div { font-size: 0.8em; /* taille = taille conteneur x 0.8 */ width: 70%; /* largeur = largeur conteneur x 70% */ border: 1px solid red; } p { font-size: 0.8em; /* taille = taille conteneur x 0.8 */ width: 50%; /* largeur = largeur conteneur x 50% */ border: 1px solid red; }

La taille de la police de caractères dans les 2 premiers paragraphes est de :
16 pixels (pour le body) * 0.8 (pour le div) * 0.8 (pour le paragaphe) = 10 pixels

La taille de la police de caractères dans le dernier paragraphe n'est pas la même que dans les paragraphes précédents :
16 pixels (pour le body) * 0.8 (pour le paragaphe) = 13 pixels

On a les mêmes différences dans la largeur des paragraphes. Pour les 2 premiers on aura par exemple :
800 pixels (largeur de la fenêtre) * 70% * 50% = 280 pixels
alors que pour le dernier on aura :
800 pixels (largeur de la fenêtre) * 50% = 400 pixels

Les valeurs relatives sont à manier avec précaution pour éviter des cumuls qui peuvent amener à ce que des éléments de même type (exemple des paragraphes) n'aient pas la taille de police ou la même largeur dans la page.

### Définition du bloc conteneur

Les spécifications CSS expliquent comment est défini un bloc conteneur.

Il existe un bloc conteneur initial dont les dimensions sont celles de la zone d'affichage du navigateur (viewport). C'est dans ce bloc conteneur initial que sont contenus tous les blocs affichés à un moment donné par le navigateur. Quand l'utilisateur redimensionne la fenêtre du navigateur, les dimensions de ce bloc conteneur initial changent et tous les positionnements et dimensions de son contenu doivent être recalculés pour que le réaffichage tiennent compte de ces modifications.

Pour les éléments en positionnement statique (le positionnement par défaut) ou relatif, le bloc conteneur est constitué par l'ancêtre bloc le plus proche dans la hiérarchie.

Pour les éléments en positionnement fixe, le bloc conteneur est constitué par le bloc conteneur initial (ie la zone d'affichage de la fenêtre du navigateur - viewport -).

Pour les éléments en positionnement absolu, le bloc conteneur est l'ancêtre le plus proche en positionnement relatif, absolu ou fixe. Le positionnement est calculé par rapport à la bordure de l'ancêtre, soit le contenu plus la marge interne.

S'il n'y a pas d'ancêtre correspondant, l'ancêtre est le bloc conteneur initial.

Ces règles de définition du bloc conteneur d'un élément deviennent très importantes à partir du moment où vous positionnez des boîtes en absolu car si vous ne les avez pas bien assimilées vous pouvez arriver à des résultats inattendus.

Exemple : blocs conteneurs
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> </head> <body> <h2>L'Arrière Des Etoiles</h2> <div> <p>Les CSS sont <strong>l'arme <em>secrète</em> de la Force !</strong></p> <p><img src="../exemples/img/yoda1.png"> Télécharger <a href="#">ce tutoriel</a> tu dois.</p> </div> </body> </html>

L'arbre DOM simplifié du code précédent est le suivant : | Les conteneurs des éléments sont les suivants : | Si on positionne `div` et `img` en absolu, les conteneurs deviennent :
Elément | Conteneur
`html` | Conteneur initial
`body` | `html`
`h2` | `body`
`div` | `body`
`p` | `div`
`strong` | `p`
`em` | `p`
`p` | `div`
`img` | `p`
`a` | `p`
Elément | Conteneur
`html` | Conteneur initial
`body` | `html`
`h2` | `body`
`div` | `Conteneur initial`
`p` | `div`
`strong` | `p`
`em` | `p`
`p` | `div`
`img` | `div`
`a` | `p`
Quand on positionne en absolu l'élément `div`, on change son bloc conteneur de référence pour l'élément `html` car `div` n'a aucun ancêtre positionné. Quand on positionne en absolu l'élément `img`, on change aussi son bloc conteneur de référence pour l'élément `div` qui est son premier ancêtre positionné.