Quelles sont les différences entre le positionnement relatif et le positionnement absolu ?

Les différences sont : 1. Base de positionnement, les éléments positionnés relativement sont positionnés par rapport à leur position d'origine et les éléments positionnés de manière absolue sont positionnés par rapport à leur élément parent positionné le plus proche. 2. Marges et remplissage, les marges et le remplissage des éléments. affecter les éléments positionnés de manière relative, et les marges et le remplissage des éléments n'affecteront pas les éléments en position absolue ; 3. L'index z d'un élément n'affectera pas les éléments en position relative, mais l'index z d'un élément affectera les éléments en position absolue.

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

Le positionnement relatif et le positionnement absolu sont tous deux des méthodes de positionnement en CSS, et ils vous permettent tous deux de déplacer un élément de sa position par défaut vers une position différente. Cependant, il existe quelques différences clés entre eux :

Positionnement relatif

* Un élément positionné relativement est positionné par rapport à sa position d'origine.

* Les marges et le remplissage des éléments affectent les éléments positionnés relativement.

* Le z-index d'un élément n'affecte pas les éléments positionnés relativement.

Positionnement absolu

* Un élément en position absolue est positionné par rapport à son élément parent positionné le plus proche.

* Les marges et le remplissage des éléments n'affectent pas les éléments positionnés de manière absolue.

* Le z-index d'un élément affecte les éléments en position absolue.

Voici les différences spécifiques entre le positionnement relatif et le positionnement absolu :

Propriétés	Positionnement relatif	Positionnement absolu
Base de positionnement	Position d'origine de l'élément	Parent le plus proche de l'élément
Les marges et le remplissage	affecteront la position des éléments	n'affectera pas la position de l'élément
z Index	n'affectera pas la position de l'élément	affectera la position de l'élément
La taille de l'élément	n'affectera pas la position de l'élément	affectera l'élément La position de l'élément
L'arrière-plan de l'élément	n'affectera pas la position de l'élément	affectera la position de l'élément
L'ombre de l'élément	n'affecte pas la position de l'élément	affecte la position de l'élément

Exemple de positionnement relatif

<div class="container">
  <div class="box">
    <p>这是一个相对定位的元素。它相对于其原始位置向右移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: relative;
  left: 100px;
}

Ce code créera un conteneur contenant un élément relativement positionné. L'élément positionné relativement sera déplacé de 100 pixels vers la droite.

Exemple de positionnement absolu

<div class="container">
  <div class="box">
    <p>这是一个绝对定位的元素。它相对于其最近的定位父元素向下移动了 100 像素。</p>
  </div>
</div>

.container {
  width: 1000px;
  height: 100px;
}
.box {
  width: 200px;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 100px;
}

Ce code créera un conteneur contenant un élément positionné de manière absolue. Les éléments positionnés de manière absolue descendront de 100 pixels.

En utilisation réelle, vous pouvez choisir un positionnement relatif ou un positionnement absolu selon vos besoins. Le positionnement relatif est un bon choix si vous avez simplement besoin de déplacer un élément de sa position par défaut vers un autre emplacement. Si vous devez positionner un élément à un emplacement spécifique, le positionnement absolu est une meilleure option.

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!