Positionner les éléments UTILITAIRES:Positionner les éléments

1. Le positionnement dans les pages web UTILITAIRES:Connaître les positions

Vous avez plusieurs positionnements des éléments à votre disposition : les positions statiques (static), relatives (relative), absolues (absolute), fixe (fixed) et épinglées (sticky). Avec Bootstrap, vous retrouvez ces positions avec les classes position-static, position-relativeposition-absolute, position-fixed et position-sticky.

Pour positionner vos éléments, vous pouvez aussi utiliser des emplacements prédéfinis avec les valeurs top, start, bottom et end. Enfin, vous indiquerez une position prédéfinie avec les valeurs 0, 50 et 100.

Voici un exemple de positionnement : position-absolute top-0 start-0. L’élément est placé en position absolue, en haut à gauche de son élément parent.

Notez bien que les éléments positionnés perdent l’affichage responsive.

Les exemples de cette section sont à télécharger dans le dossier nommé 12-Utilitaires-09.

2. Exemples de positionnement UTILITAIRES:Exemples de positions

Voici le code utilisé pour ces exemples :

<div class="position-relative border border-2" style="margin-left:50px; 
width:500px; height:200px;"> 
  <img src="carre.png" class="position-absolute top-0 start-0"> 
  <img...
couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
La taille des colonnes
Suivant
Des classes pour le texte