Connaissez-vous ces cinq méthodes de positionnement absolu courantes ?

Cinq méthodes de positionnement absolu courantes, les connaissez-vous toutes ?

Le positionnement absolu est une méthode de positionnement couramment utilisée en CSS, qui permet de positionner un élément par rapport à son élément ancêtre positionné le plus proche. Dans cet article, nous aborderons cinq méthodes courantes de positionnement absolu et fournirons des exemples de code spécifiques pour chacune.

1. positionnement en haut, à droite, en bas et à gauche

La méthode de positionnement absolu la plus courante consiste à utiliser les attributs haut, droite, bas et gauche pour positionner les éléments. En spécifiant les valeurs de ces propriétés, on peut contrôler la position d'un élément par rapport à son élément parent.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">我在右上角</div>
</div>

Le code ci-dessus positionnera le deuxième élément div dans le coin supérieur droit de son élément parent, à 10 pixels du haut et de la droite.

2. Positionnement en pourcentage

En plus d'utiliser des valeurs de pixels spécifiques, nous pouvons également utiliser des pourcentages pour positionner les éléments. Le positionnement en pourcentage est relatif à la largeur et à la hauteur de l'élément parent. Par exemple, nous pouvons utiliser 50% pour centrer l'élément horizontalement.

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>

Le code ci-dessus positionnera le deuxième élément div centré horizontalement sur son élément parent.

3. Positionnement décalé

Le positionnement décalé consiste à positionner un élément en spécifiant son décalage par rapport à sa position d'origine. On peut utiliser des valeurs négatives pour déplacer un élément vers le haut ou vers la gauche, et des valeurs positives pour déplacer un élément vers le bas ou vers la droite.

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>

Le code ci-dessus déplacera le deuxième élément div vers le haut et vers la gauche de 20 pixels.

4. Positionnement d'empilage

Le positionnement d'empilage fait référence au contrôle de l'ordre d'empilement des éléments en spécifiant l'attribut z-index de l'élément. Plus la valeur z-index d'un élément est grande, plus elle est affichée.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px; z-index: 1;">我在上面</div>
  <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">我在下面</div>
</div>

Le code ci-dessus affichera le deuxième élément div au-dessus du premier élément div.

5. Positionnement fixe

Le positionnement fixe signifie que l'élément est positionné par rapport à la position de la fenêtre du navigateur, quelle que soit la façon dont la barre de défilement se déplace, l'élément restera dans une position fixe.

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>

Le code ci-dessus épinglera l'élément dans le coin supérieur droit de la fenêtre du navigateur.

En maîtrisant ces cinq méthodes de positionnement absolu courantes, nous pouvons contrôler et disposer les éléments dans les pages Web de manière plus flexible. J'espère que cet article pourra vous aider à comprendre et à utiliser le positionnement absolu 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!