HTML & CSS : Définir la position de vos blocs div

Rappelez-vous, vous avez lu plusieurs articles sur les blocs div car ils sont très important à maîtriser, c’est fondamental avec HTML 5 et CSS3. Dans ce nouvel article, vous allez apprendre à positionner vos blocs exactement là où vous le souhaitez.

Le positionnement statique

Il existe plusieurs propriétés CSS 3, pour positionner vos blocs. Pour le positionnement d’un bloc par défaut, vous utilisez la balise position static. Avec cette valeur, le bloc ne peut pas être positionné, ni repositionné, et sa visibilité ne peut pas être modifiée. En position static, il est statique !

Vous pouvez quand même modifier le style que prendra votre texte.

Syntaxe :

.static {
   width: 250px;
   border: 2px solid red;
   text-align: center;
}

Puis :

<div class="static">Position normale statique</div>

Le positionnement relatif

Vous avez le positionnement relatif avec la balise suivante, position: relative. La position est alors définie par les propriétés top, bottom, left et right pour respectivement la position par rapport au haut de l’élément parent, le bas, la gauche et la droite. Vous pouvez également utiliser des valeurs négatives.

Syntaxe :

.relative {
   position: relative;
   top: 30px;
   left: 60px;
   width: 250px;
   border: 2px solid blue;
   text-align: center;
}

Un exemple pour positionner un bloc à 30 pixels du haut, 60 pixels de la gauche, avec une bordure et un texte centré.

Le positionnement absolu

Vous avez également la position absolue, donc ça crée un bloc complètement indépendant du reste du document, et il se positionne pile poil à l’emplacement que vous définissez. Cela implique que votre bloc pourra se superposer avec d’autres blocs.

Syntaxe :

.absolute {
   position: absolute;
   top: 30px;
   left: 360px;
   width: 250px;
   border: 2px solid blue;
   text-align: center;
}

Le positionnement fixe d’une div

Vous avez la position fixed, fixe, elle crée un bloc indépendant. Vous définissez sa position et le bloc reste fixe même lorsque le document défile. Cette propriété permet de créer des blocs fixes.

Rappelez-vous l’article sur les images d’arrière-plan, des images fixes d’arrière-plan qui ne bougeaient pas quand l’utilisateur défile. Vous pouvez réaliser exactement la même chose avec les blocs en les définissant avec la position: fixed.

Syntaxe :

.fixed {
   position: fixed;
   top: 300px;
   left: 60px;
   width: 250px;
   border: 2px solid blue;
   text-align: center;
}

La propriété float

Vous avez la propriété float. Vous allez la voir très souvent en CSS 3 car elle est souvent utilisée.

La propriété float retire un bloc de l’affichage HTML pour le placer le plus à droite ou le plus à gauche de son élément parent, dans ce conteneur.

float: right va placer le bloc à droite. Vous avez un container, un div principal, un autre div à l’intérieur.

float: right, place le bloc à droite, float: left le place à gauche. Et none pour pas de spécifications, c’est le navigateur qui décide.

La propriété float ne peut s’appliquer que pour un positionnement statique et relatif, elle ne fonctionne pas en absolu, ni en fixe.

Exemple :

img { float: right; }

Un exemple avec une image en style float, qui est un logo. Vous mettez le texte dans un div principal, un paragraphe de texte, et vous aurez le logo sur la droite.

La propriété clear

Vous avez la propriété clear qui permet d’annuler le flottement si vous avez utilisé la propriété float à un moment ou un autre. Vous pouvez utiliser la balise clear avec des valeurs right, ça annule le flottement à droite, ou left, ça annule le flottement à gauche, ou both ça annule le flottement des deux côtés, ou none ça annule toutes les propriétés de flottement.

Exemple :

p { clear: both; }

Flexbox

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l’espace entre des objets d’une interface ainsi que de les aligner.

Pour en savoir plus sur le sujet, lire l’article détaillé : Les concepts de base pour flexbox

Conclusion

Les blocs peuvent être placés sur votre page où vous le souhaitez. Ainsi, si vous voulez qu’un bloc soit toujours visible et qu’il reste au même endroit, quoi que fasse l’utilisateur, vous utiliserez une position absolue.

La plupart du temps, votre bloc sera en position flottante, et c’est le navigateur qui le placera où il faut par rapport aux autres blocs. La propriété clear devra être utilisée pour annuler les anciens réglages que vous aurez définis pour être sûr d’appliquer l’effet désiré.

Cela pourrait vous intéresser ➡️ Compréhension des problèmes d’empilement en CSS et leur ordre de priorité

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Ici le parcours complet pour devenir développeur web : https://www.develop4fun.fr/parcours-developpeur-web-cours-en-ligne

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA