Position absolue et centrages d'un élement HTML

Présentation

Nous souhaitons positionner un élément à l'intérieur d'un autre élément, plus précisément nous voulons avoir la possibilité de la placer au quatre coins de l'élément parent, centrer horizontalement ou verticalement ainsi que définir une position précise.

<div class="container">
    <div class="box">
    </div>
</div>

Code HTML pour le positionnement d'un élément « box » à l'intérieur d'un élément « container ».

Pour la lisibilité du texte, nous appliquerons une hauteur définie au conteneur et une couleur de fond rouge à l'élément que l'on souhaite positionner.

.container { 
    position: relative;
    height: 100px;
}
.box {
    position: absolute;
    background: #f00;
    margin: 0;
    width: 20px;
    height: 20px;
}

Règles CSS appliquées aux éléments.

/// <div class="container"><div class="box"></div></div> ///

Rendu du code HTML avec les règles CSS de base appliquées.

L'alignement se fera par l'intermédiaire de 6 classes, qui permettront de définir 3 positions sur l'axe des abscisses et 3 sur celui des ordonnées :

hStart, pour un alignement horizontal à gauche.
hCenter, pour un alignement horizontal centré.
hEnd, un alignement horizontal à droite.
vStart, un alignement vertical en haut.
vCenter, un alignement vertical au milieu.
vEnd, un alignement vertical en bas.

Le positionnement de l'élément sera donc la résultante de la combinaison de deux classes, la première pour le vecteur horizontal (hStart, hCenter ou hEnd), la seconde pour le vecteur vertical (vStart, vCenter ou vEnd).

Positionnement aux quatres coins

Les positionnements aux quatres coins du conteneur peuvent s'obtenir aisément en utilisant les 4 propriétés CSS de position : top, right, bottom et left.

/* Positionnement horizontal à gauche */
.hStart {
    left: 0;
}

/* Positionnement horizontal à droite */
.hEnd {
    right: 0;
}

/* Positionnement vertical en haut */
.vStart {
    top: 0;
}

/* Positionnement vertical en bas */
.vEnd {
    bottom: 0;
}

Règles CSS de positionnement aux 4 coins du conteneur.

<div class="container">
    <div class="box hStart vStart"></div>
    <div class="box hEnd vStart"></div>
    <div class="box hStart vEnd"></div>
    <div class="box hEnd vEnd"></div>
</div>

Code HTML de test du positionnement aux 4 coins du conteneur.

/// <div class="container"> <div class="box hStart vStart"></div> <div class="box hEnd vStart"></div> <div class="box hStart vEnd"></div> <div class="box hEnd vEnd"></div> </div> ///

Rendu du positionnement aux 4 coins du conteneur.

Centrages

Pour les positions centrées, il faut jouer avec le couple de propriétés dédié à chaque axe (top et bottom pour l'axe vertical, left et right pour l'axe horizontal) ainsi que sur les marges externes (margin) de la boîte.

/* Centrage vertical */
.vCenter {
    bottom: 0; 
    top: 0; 
    margin-top: auto; 
    margin-bottom: auto; 
}

/* Centrage horizontal */
.hCenter { 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

Règles CSS pour le centrage de l'élément dans un conteneur.

Nous avons vu que dans certains cas, la déclarations des 2 propriétés de position liées à un axe permettent d'étendre la taille de la boîte ; ici, les tailles étant explicitement déclarées, elles prévalent. L'alignement centré s'obtient grâce à la valeur « auto » appliquée aux marges externes et le calcul de la position que doivent effectuer les navigateurs web suivant les spécifications CSS :

If none of the three ['left', 'width', and 'right'] is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values [...]
[...]
If none of the three ['top', 'height', and 'bottom'] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.

Visual formatting model details

<div class="container">
    <div class="box hCenter vStart"></div>
    <div class="box hEnd vCenter"></div>
    <div class="box hCenter vEnd"></div>
    <div class="box hStart vCenter"></div>
    <div class="box hCenter vCenter"></div>
</div>

Code HTML de test pour les positionnements centrés.

/// <div class="container"> <div class="box hCenter vStart"></div> <div class="box hEnd vCenter"></div> <div class="box hCenter vEnd"></div> <div class="box hStart vCenter"></div> <div class="box hCenter vCenter"></div> </div> ///

Rendu du test pour les positionnement centrés.

Démonstration

Ressources et références

chapter: Visual formatting model details

°°ref°° art.css-pos-size