Quelles sont les méthodes de positionnement CSS ?

Il existe 5 méthodes de positionnement CSS : 1. Positionnement flottant (float). 2. statique (positionnement statique) ; sans positionnement, l'élément apparaît dans le flux normal. 3. Relatif (positionnement relatif) ; l'élément est séparé du flux normal de documents. 4. Absolu (positionnement absolu). 5. fixe (positionnement fixe).

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

La mise en page complexe d'une page Web est réalisée grâce au positionnement flexible de divers éléments de la page Web. Le positionnement de divers éléments dans la page Web a ses propres caractéristiques. Jetons un coup d'œil à plusieurs méthodes de positionnement des CSS.

Positionnement flottant (c'est-à-dire positionnement flottant) :

Cette méthode de positionnement est très simple, il suffit de spécifier une direction flottante (telle que : float:left; signifie ceci L'élément est placé à gauche), et son positionnement est relatif au conteneur de l'élément parent

Si l'élément est défini sur float, les éléments immédiatement derrière lui seront affectés par le float, donc les éléments suivants doivent ne soit pas affecté, les flotteurs doivent être effacés plus tard (clair : les deux ; et d'autres méthodes peuvent être utilisées. Lorsque deux éléments adjacents sont définis sur le même flotteur, les deux éléments seront placés l'un à côté de l'autre dans l'ordre). Ce positionnement retire l'élément du flux documentaire.

Positionnement :

Le positionnement par position est le positionnement à une position spécifiée. Les éléments suivants sont couramment utilisés :

statique (positionnement statique) :

Lorsque nous ne spécifions pas de méthode de positionnement, la méthode de positionnement par défaut est statique, ce qui signifie qu'elle est automatiquement attribuée à un endroit approprié en fonction de la disposition d'écriture du document. Cette méthode de positionnement utilise la marge pour changer la position, pour la gauche, top, z- Index et autres valeurs de réglage ne sont pas valides. Ce positionnement ne se détache pas du flux de documents

2. Positionnement relatif (positionnement relatif) :

Ce positionnement est un. positionnement relatif, qui peut être défini en définissant des valeurs égales à gauche et en haut, de sorte que l'élément spécifié soit décalé par rapport à sa position normale. Ce positionnement ne s'écarte pas du flux du document

3. positionnement absolu) :

Ce positionnement est effectué en définissant top Les valeurs de décalage​​de , right, bottom et left sont positionnées par rapport au premier élément parent autre que le positionnement statique (ce positionnement est généralement utilisé en conjonction avec la définition de l'élément parent sur un positionnement relatif). En l'absence d'un élément parent, sa référence est le corps, qui est hors du flux de documents ;

Fixe (positionnement fixe) :

Cette méthode de positionnement est relative à l'ensemble du document, il suffit de la définir par rapport à chaque direction. La valeur de décalage peut fixer l'élément à une position fixe sur la page. Elle est généralement utilisée pour afficher des informations d'invite et s'en détacher. le flux de documents

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!