Quels sont les attributs du poste ?

Les valeurs de l'attribut position incluent statique, relatif, absolu, fixe, collant, etc. Introduction détaillée : 1. static est la valeur par défaut de l'attribut position, ce qui signifie que les éléments sont disposés selon le flux normal du document sans positionnement particulier. La position des éléments est déterminée par leur ordre dans le document HTML et ne peut pas être définie. passé par le haut, la droite et le bas. Ajustez avec l'attribut gauche ; 2. relatif est le positionnement relatif et ainsi de suite.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Dans le développement front-end, la position est un attribut important en CSS, qui est utilisé pour contrôler le positionnement des éléments. L'attribut position a les valeurs suivantes couramment utilisées :

1. static (valeur par défaut) :

Static est la valeur par défaut de l'attribut position, ce qui signifie que l'élément est disposé selon le flux normal du document sans positionnement particulier. La position d'un élément est déterminée par son ordre dans le document HTML et ne peut pas être ajustée via les attributs top, right, bottom et left.

   .element {
     position: static;
   }

2. relatif：

Le positionnement relatif relatif signifie que l'élément est positionné par rapport à sa position normale. En définissant les propriétés haut, droite, bas et gauche, vous pouvez affiner la position de l'élément dans le flux de documents. Le positionnement relatif n'affecte pas la disposition des autres éléments.

   .element {
     position: relative;
     top: 10px;
     left: 20px;
   }

3. absolu :

Le positionnement absolu signifie que l'élément est positionné par rapport à son élément parent positionné le plus proche (la valeur de l'attribut position n'est pas statique). S'il n'y a pas d'élément parent positionné, le positionnement est relatif au bloc conteneur initial du document. En définissant les attributs haut, droite, bas et gauche, vous pouvez contrôler avec précision la position de l'élément.

   .element {
     position: absolute;
     top: 50px;
     left: 100px;
   }

4. fixe :

Le positionnement fixe signifie que l'élément est positionné par rapport à la fenêtre du navigateur et reste toujours à une position fixe dans la fenêtre et ne changera pas de position avec le défilement. En définissant les propriétés top, right, bottom et left, vous pouvez déterminer la position de l'élément dans la fenêtre.

   .element {
     position: fixed;
     top: 0;
     right: 0;
   }

5. sticky :

Le positionnement collant signifie que l'élément est positionné en fonction des changements de position de défilement. Lorsqu'un élément est visible dans un conteneur, sa position est relative au conteneur et lorsque l'élément défile hors du conteneur, il est ancré aux limites du conteneur. En définissant les attributs haut, droite, bas et gauche, vous pouvez contrôler le positionnement collant des éléments.

   .element {
     position: sticky;
     top: 20px;
   }

En plus des valeurs d'attribut de position couramment utilisées ci-dessus, il existe également des valeurs moins couramment utilisées, telles que :

- hériter : hérite de la valeur de l'attribut de position de l'élément parent.

- initial : Réinitialise la propriété position à la valeur par défaut statique.

- unset : réinitialise l'attribut de position à la valeur par défaut et hérite de la valeur de l'attribut de position de l'élément parent.

Il convient de noter que la valeur de l'attribut position affectera l'ordre d'empilement (z-index) des éléments. Différentes méthodes de positionnement ont des règles d'ordre d'empilement différentes.

En résumé, l'attribut position est utilisé pour contrôler la méthode de positionnement des éléments. Les valeurs couramment utilisées sont statiques, relatives, absolues, fixes et collantes. La position de l'élément peut être ajustée en définissant les attributs haut, droite, bas et gauche. Comprendre et utiliser de manière flexible l'attribut position peut nous aider à obtenir des effets de mise en page plus précis.

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!