Comment utiliser la position en CSS

L'attribut position en CSS est utilisé pour définir la position des éléments dans le flux de documents. Les valeurs possibles sont : statique (par défaut) : les éléments sont disposés dans l'ordre normal dans le flux de documents. relatif : déplace un élément d'une certaine distance par rapport à sa position d'origine, tout en restant dans le flux de documents. absolu : supprime un élément du flux de documents et le positionne par rapport à son élément parent ou racine. corrigé : correction de l'élément dans la fenêtre d'affichage du navigateur afin qu'il ne bouge pas même si la page défile.

Utilisation de position en CSS

La propriété position définit la position d'un élément dans le flux du document HTML et des éléments environnants. Il peut spécifier si l'élément est statique, relatif, absolu ou fixe.

1. statique (par défaut)

Le positionnement statique est le positionnement par défaut et l'élément occupe un espace normal dans le flux de documents.

2. relatif

Le positionnement relatif déplace un élément d'une certaine distance de sa position normale sans le sortir du flux du document.

3. absolu

Le positionnement absolu supprime un élément du flux de documents et le positionne en fonction de son élément parent ou racine.

4. fixe

Le positionnement fixe corrige l'élément dans la fenêtre du navigateur et ne bougera pas même si la page défile.

Usage

La syntaxe de l'attribut position est la suivante :

position: value;

Où, la valeur peut être l'une des valeurs suivantes :

• static
• relative
• absolute
• fixed

Exemple

Exemple ci-dessous Positionnez un élément div de manière relative et déplacez-le de 10px vers la droite :

div {
  position: relative;
  right: 10px;
}

L'exemple suivant positionne un élément div absolument dans le coin inférieur droit de la page :

div {
  position: absolute;
  bottom: 0;
  right: 0;
}

Remarque :

• Seuls les éléments avec les attributs de positionnement peuvent définir les attributs gauche, droite, haut et bas.
• Les éléments positionnés de manière relative occupent de l'espace dans le flux de documents, contrairement aux éléments positionnés de manière absolue.
• Les éléments positionnés fixes ne bougeront pas lorsque la page défile, mais affecteront le positionnement des autres éléments.

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!