Maîtrisez les valeurs d'attribut communes du positionnement absolu et laissez les éléments de votre page être placés comme vous le souhaitez

Maîtrisez les valeurs d'attribut communes​​du positionnement absolu et laissez les éléments de votre page être placés comme vous le souhaitez. Des exemples de code spécifiques sont nécessaires

Le positionnement absolu (positionnement absolu) est l'une des méthodes de positionnement couramment utilisées en CSS. . Il nous permet de positionner les éléments par rapport à Positioned par son élément parent le plus proche avec un attribut de positionnement. En maîtrisant les valeurs d'attribut communes du positionnement absolu, nous pouvons facilement contrôler la position et la disposition des éléments de la page.

1. Concepts de base des éléments de positionnement

Avant d'utiliser le positionnement absolu, nous devons comprendre certains concepts de base. L'élément parent fait référence à l'élément ancêtre avec des attributs de positionnement, et l'élément enfant fait référence à l'élément qui doit être positionné. Lors de l'utilisation du positionnement absolu, nous pouvons ajuster la position des éléments enfants en définissant des valeurs d'attribut telles que haut, bas, gauche et droite.

2. Valeurs d'attribut communes du positionnement absolu

Dans le positionnement absolu, nous utilisons souvent les valeurs d'attribut suivantes pour contrôler la position et la disposition des éléments :

(1) attribut top

En définissant l'attribut top valeur, nous pouvons spécifier l'enfant La distance entre l'élément et le haut de son élément parent. L'exemple de code est le suivant :

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(2) attribut bottom

En définissant la valeur de l'attribut bottom, nous pouvons spécifier la distance entre l'élément enfant et le bas de l'élément parent. L'exemple de code est le suivant :

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(3) attribut gauche

En définissant la valeur de l'attribut gauche, nous pouvons spécifier la distance entre l'élément enfant et le côté gauche de l'élément parent. L'exemple de code est le suivant :

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(4) attribut droit

En définissant la valeur de l'attribut droit, nous pouvons spécifier la distance entre l'élément enfant et le côté droit de l'élément parent. L'exemple de code est le suivant :

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

3. Notes

Lors de l'utilisation du positionnement absolu, nous devons faire attention aux points suivants :

(1) L'élément parent doit définir l'attribut de positionnement

Si l'élément parent ne définit pas l'attribut de positionnement (position : relative/absolue/fixe), l'élément enfant ne peut pas être positionné via les attributs haut, bas, gauche et droite.

(2) La largeur et la hauteur de l'élément enfant sont définies par rapport à l'élément parent

En positionnement absolu, la largeur et la hauteur de l'élément enfant sont généralement définies par rapport à l'élément parent. Bien entendu, on peut également utiliser des pourcentages pour définir la largeur et la hauteur et les adapter en fonction de la taille de l'élément parent.

(3) Chevauchement des positions des éléments

Lors de l'utilisation du positionnement absolu, si les positions des sous-éléments se chevauchent, les sous-éléments suivants couvriront les sous-éléments précédents.

Conclusion

En maîtrisant les valeurs d'attribut communes​​du positionnement absolu, nous pouvons facilement réaliser le placement libre des éléments de la page. Cependant, dans l'utilisation réelle, nous devons prêter attention à la définition raisonnable des attributs de positionnement des éléments parents et des éléments enfants, ainsi qu'au chevauchement des positions des éléments, pour garantir la beauté et la lisibilité de la mise en page.

Ce qui précède est une introduction aux valeurs d'attributs communes​​pour maîtriser le positionnement absolu. J'espère que cela sera utile à tout le monde. Je pense que le code écrit en pratique vous aidera à mieux comprendre et maîtriser ces valeurs d'attribut, afin que les éléments de votre page puissent être placés comme vous le souhaitez.

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!