Bases CSS : position et float

CSS fournit des propriétés de positionnement et de flottement qui vous permettent de créer des dispositions en colonnes, de superposer une partie d'une disposition avec une autre et d'accomplir des tâches qui, pendant des années, nécessitaient souvent l'utilisation de plusieurs tableaux.
L'idée de base du positionnement est simple, elle permet de définir où doit apparaître la case d'un élément par rapport à sa position normale, ou par rapport à un élément parent, un autre élément ou encore la fenêtre du navigateur elle-même. Evidemment, cette fonctionnalité est très puissante et surprenante. Il ne devrait pas être surprenant de savoir que les agents utilisateurs prennent bien mieux en charge le positionnement dans CSS2 que d'autres aspects.
Les flottants, quant à eux, ont été introduits pour la première fois dans CSS1 et étaient basés sur une fonctionnalité ajoutée par Netscape aux débuts du Web. Flotter n'est pas exactement un positionnement, mais ce n'est certainement pas non plus une disposition de flux normale. Nous clarifierons la signification de float dans un chapitre ultérieur.

tout est un cadre

Un élément div, h1 ou p est souvent appelé élément de niveau bloc. Cela signifie que ces éléments apparaissent comme un bloc de contenu, une « block box ». En revanche, des éléments tels que span et strong sont appelés « éléments en ligne » car leur contenu apparaît dans une ligne, une « boîte en ligne ».
Vous pouvez modifier le type de boîte générée à l'aide de la propriété display. Cela signifie que vous pouvez faire en sorte que les éléments en ligne (tels que les éléments <a>) se comportent comme des éléments de niveau bloc en définissant la propriété display sur block. Vous pouvez également définir display sur none afin que l'élément généré n'ait aucune boîte du tout. De cette façon, la boîte et tout son contenu ne sont plus visibles et ne prennent pas de place dans le document.
Mais dans un cas, des éléments au niveau bloc sont créés même sans définition explicite. Cela se produit lorsque vous ajoutez du texte au début d'un élément de niveau bloc (comme un div). Même si le texte n'est pas défini comme un paragraphe, il sera traité comme tel :


Dans ce cas, la boîte est appelée boîte de bloc sans nom car elle n’est pas associée à un élément spécifiquement défini.
Une chose similaire se produit avec les lignes de texte pour les éléments de niveau bloc. Supposons que vous ayez un paragraphe contenant trois lignes de texte. Chaque ligne de texte forme une case sans nom. Vous ne pouvez pas appliquer directement des styles à des blocs ou à des zones de ligne sans nom, car il n'y a aucun endroit pour appliquer des styles (notez que les zones de ligne et les zones en ligne sont deux concepts différents). Cependant, il est utile de comprendre que tout ce que vous voyez à l’écran forme une sorte de boîte.

Mécanisme de positionnement CSS

CSS dispose de trois mécanismes de positionnement de base : flux normal, flottement et positionnement absolu.
Toutes les boîtes sont positionnées dans le flux normal sauf indication contraire. Autrement dit, la position d'un élément dans un flux normal est déterminée par la position de l'élément dans X(HTML).
Les cases au niveau des blocs sont disposées les unes après les autres de haut en bas, et la distance verticale entre les cases est calculée à partir des marges verticales des cases.
Les boîtes en ligne sont disposées horizontalement dans une rangée. Leur espacement peut être ajusté à l’aide d’un remplissage horizontal, de bordures et de marges. Toutefois, le remplissage vertical, les bordures et les marges n'affectent pas la hauteur de la boîte en ligne. La boîte horizontale formée par une ligne est appelée boîte de ligne. La hauteur d'une boîte de ligne est toujours suffisamment élevée pour accueillir toutes les boîtes en ligne qu'elle contient. Cependant, la définition de la hauteur de ligne peut augmenter la hauteur de cette boîte.
Ci-dessous, nous expliquerons en détail le positionnement relatif, le positionnement absolu et le flottement.

Propriété de position CSS

En utilisant la propriété position, nous pouvons choisir entre 4 types de positionnement différents, ce qui affecte la façon dont la boîte de l'élément est générée.
La signification de la valeur de l'attribut position :
statique
La boîte d'éléments est générée normalement. Les éléments de niveau bloc créent une zone rectangulaire dans le cadre du flux de documents, tandis que les éléments en ligne créent une ou plusieurs zones de ligne placées dans leur élément parent.
relatif
La boîte d'éléments est décalée d'une certaine distance. L'élément conserve sa forme non positionnée et l'espace qu'il occupait initialement.
absolu
La zone d'élément est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur. Le bloc conteneur peut être un autre élément du document ou le bloc conteneur initial. L'espace précédemment occupé par l'élément dans le flux de documents normal est fermé, comme si l'élément n'existait pas. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.
fixé
L'élément box se comporte comme si la position était absolue, sauf que son bloc conteneur est la fenêtre elle-même.
Astuce : Le positionnement relatif est en fait considéré comme faisant partie du modèle de positionnement du flux normal, car la position d'un élément est relative à sa position dans le flux normal.

Propriétés de positionnement CSS

Les propriétés de positionnement CSS vous permettent de positionner les éléments.
Description de la propriété
position place l'élément dans une position statique, relative, absolue ou fixe.
top définit le décalage entre la limite de la marge supérieure d'un élément positionné et la limite supérieure de son bloc conteneur.
right définit le décalage entre le bord de la marge droite de l'élément positionné et le bord droit de son bloc conteneur.
bottom définit le décalage entre la limite inférieure de la marge de l'élément positionné et la limite inférieure de son bloc conteneur.
left définit le décalage entre le bord de la marge gauche de l'élément positionné et le bord gauche de son bloc conteneur.
overflow définit ce qui se passe lorsque le contenu d'un élément déborde de sa zone.
clip définit la forme de l’élément. L'élément est découpé dans cette forme puis affiché.
vertical-align définit l'alignement vertical d'un élément.
z-index définit l'ordre d'empilement des éléments.