Pozycjonowanie względem rodzica w CSS

Jeśli elementowi nadano relative, a jego potomkowi - absolute, to ten potomek będzie pozycjonowany względem swojego rodzica, a nie względem okna przeglądarki.

Zazwyczaj w takim przypadku rodzicowi podaje się relative bez przesunięć. W tym przypadku z tym rodzicem nic się nie dzieje, ale wszyscy jego potomkowie będą teraz pozycjonowani względem niego.

Spójrzmy na przykłady.

Przykład

Na początek zróbmy po prostu blok-rodzic i blok-potomek bez pozycjonowania:

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;
}

Результат:

Przykład

Teraz ustawmy zielony blok absolutnie. Ponieważ rodzicowi nie nadano relative, potomek będzie pozycjonowany względem okna przeglądarki:

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;
}

Результат:

Przykład

Nadajmy teraz rodzicowi relative. W takim przypadku potomek będzie pozycjonowany względem swojego rodzica:

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;
}

Результат:

Zadania praktyczne

W następnych zadaniach główny blok jest wyśrodkowany za pomocą margin o wartości auto, a pozostałe są pozycjonowane względem niego za pomocą właściwości position.