Utilisation de CSS pour placer des éléments HTML

• Mai 11, 2024

Les règles CSS vous permettent de placer les éléments HTML exactement où vous le souhaitez. Vous pouvez ajuster la façon dont ils réagissent aux autres éléments assis autour d'eux, ou même les masquer entièrement. Voici une ventilation des propriétés de placement CSS.

Affichage: cette propriété définit la façon dont un élément est affiché. La définition de l'affichage sur "aucun" masque complètement l'élément, tandis que d'autres valeurs peuvent modifier la façon dont un élément réagit aux autres propriétés et éléments. Par exemple, les divs sont définis pour s'afficher comme "bloc" par défaut, ce qui signifie qu'il agit comme un objet rectangulaire, mais vous pouvez utiliser "display: inline" pour forcer un div à agir à la place comme un paragraphe. Ou, vous pouvez faire le contraire et utiliser "display: block" pour forcer un paragraphe à agir comme un div.

Position: définit la façon dont un élément réagit aux éléments qui l'entourent. Les éléments utilisent "position: statique" par défaut, ce qui signifie qu'ils s'affichent dans l'ordre tel qu'ils apparaissent dans le code HTML. "Position: relative" signifie que l'emplacement statique de l'élément est calculé, puis décalé par tout ce que vous indiquez dans les propriétés "haut" et "gauche". Les autres éléments de page agissent comme si l'élément relatif était toujours à son emplacement statique. Les éléments "Position: absolus" ignorent leur emplacement statique, basant leur position uniquement sur les valeurs des propriétés supérieure, gauche, droite et inférieure. De plus, d'autres éléments ignoreront cet élément (donc si vous ne faites pas attention, vous pouvez vous retrouver avec des chevauchements désordonnés). "Position: fixe" est similaire à "position: absolue" sauf que l'élément conservera sa place même si votre visiteur fait défiler la page.

Visibilité: décide si un élément apparaît sur la page ou non. La différence entre "display: none" et "visibilité: caché" est que dans le premier cas, les autres éléments de la page se comportent comme si l'objet invisible n'existait pas; dans ce dernier, d'autres éléments occuperont une place pour l'élément caché. De toute évidence, le paramètre par défaut est "visible".

Flottant: définit si un élément se met en cascade à gauche ou à droite des autres éléments (ou ne cascade pas du tout, ce qui est la valeur par défaut). Cette propriété est extrêmement utile pour positionner correctement les éléments relatifs. Vous devez définir une largeur pour tout élément flottant, sinon il ne s'affichera pas correctement. De plus, si vous utilisez float pour un élément, vous voudrez probablement également définir la propriété pour tous les éléments qui l'entourent.

Clear: cette propriété fonctionne conjointement avec la propriété "float". Il décide comment l'élément laissera les autres éléments flotter autour de lui - "clear: left" signifie qu'aucun autre élément ne peut flotter à sa gauche; "clear: right" bloque le côté droit et "clear: both" signifie qu'aucun élément ne peut flotter d'un côté ou de l'autre. Le paramètre par défaut est "clear: none" (ce qui signifie que d'autres éléments peuvent flotter de chaque côté).

Instructions Vidéo: Tutoriel CSS : Le positionnement en CSS (Mai 2024).