Quelles sont les trois principales méthodes de positionnement en CSS ?

CSS est l'un des langages de style les plus couramment utilisés dans la conception Web et peut contrôler la mise en page, le style, etc. Le positionnement est une partie très importante du CSS car il nous permet de contrôler librement la position des éléments dans la page Web. Il existe trois méthodes de positionnement principales en CSS, à savoir le positionnement statique, le positionnement relatif et le positionnement absolu. Les différences entre elles seront présentées une par une ci-dessous.

1. Positionnement statique

Le premier est le positionnement statique le plus simple. Le positionnement statique (statique) est la méthode de positionnement par défaut. Il est entièrement disposé selon le flux de documents HTML et les éléments sont disposés dans l'ordre du flux de documents HTML standard. Nous n'avons pas besoin de définir un positionnement statique pour l'élément car c'est la valeur par défaut. Voici un exemple simple de positionnement statique :

<div class="box">
  <p>这是一个 div 元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

Il s'agit d'un élément div typique, qui sera positionné statiquement. Il sera disposé selon le flux de document HTML standard et occupera une certaine position sur la page.

2. Positionnement relatif

Le positionnement relatif (relatif) est positionné par rapport à la position initiale de l'élément. Autrement dit, si vous positionnez un élément par rapport à sa propre position initiale, il se déplacera de cette distance. Voici un exemple simple de positionnement relatif :

<div class="box">
  <p>这是一个 div 元素。</p>
  <p class="inner">这是一个内部元素。</p>
</div>

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: relative;
  left: 30px;
  top: 20px;
}

Nous utilisons un élément interne qui est positionné par rapport à l'élément div. Nous définissons les propriétés de positionnement relatif, à gauche et en haut, de sorte que l'élément se déplace de 30 px vers la droite et de 20 px vers le bas par rapport à l'élément div. Nous pouvons donc clairement voir que le positionnement relatif n'est positionné que par rapport à la position initiale de l'élément, et non par rapport à la page entière ou à l'élément parent.

3. Positionnement absolu

Le positionnement absolu (absolu) est positionné par rapport à l'élément ancêtre positionné le plus proche (c'est-à-dire l'élément ancêtre dont la position n'est pas statique). S'il n'y a pas d'élément ancêtre positionné, l'élément sera positionné par rapport à l'élément body. Voici un exemple simple de positionnement absolu :

<div class="container">
  <div class="box">
    <p>这是一个 div 元素。</p>
    <p class="inner">这是一个内部元素。</p>
  </div>
</div>

.container {
  position: relative;
}

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: absolute;
  right: 30px;
  bottom: 20px;
}

Nous utilisons un conteneur externe réglé sur un positionnement relatif. Nous définissons les propriétés de positionnement absolues d'un élément interne, à droite et en bas, ce qui provoque le déplacement de l'élément de 30 pixels vers la droite et de 20 pixels vers le bas par rapport à l'élément div. Notez que nous définissons l'attribut position du conteneur externe. En effet, le positionnement absolu nécessite un objet de référence. Si l'attribut position d'aucun élément parent n'a une valeur non statique, l'élément sera positionné par rapport à l'élément body.

Résumé

Pour résumer, il existe trois méthodes principales de positionnement en CSS, à savoir le positionnement statique, le positionnement relatif et le positionnement absolu. Le positionnement statique est la méthode de positionnement par défaut et les éléments sont disposés selon le flux de documents HTML standard. Le positionnement relatif positionne un élément par rapport à sa position initiale, tandis que le positionnement absolu le positionne par rapport à l'élément ancêtre positionné le plus proche. Par conséquent, lors de la conception de la mise en page d'une page Web, nous devons choisir différentes méthodes de positionnement en fonction des besoins pour obtenir le meilleur effet.

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!