Positionnement relatif au parent en CSS

Si un élément a la valeur relative, et son enfant - absolute, alors cet enfant sera positionné par rapport à son parent, et non par rapport à la fenêtre du navigateur.

En règle générale, dans ce cas, on spécifie relative au parent sans décalage. Dans ce cas, rien n'arrive à ce parent, mais tous ses enfants se positionneront maintenant par rapport à lui.

Regardons des exemples.

Exemple

Pour commencer, créons simplement un bloc parent et un bloc enfant sans positionnement :

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Exemple

Positionnons maintenant le bloc vert de manière absolue. Comme le parent n'a pas de relative, l'enfant sera positionné par rapport à la fenêtre du navigateur :

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Exemple

Spécifions maintenant relative au parent. Dans ce cas, l'enfant sera positionné par rapport à son parent :

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Tâches pratiques

Dans les tâches suivantes, le bloc principal est centré à l'aide de margin avec la valeur auto, et les autres sont positionnés par rapport à lui en utilisant la propriété position.