Pozicování vůči rodiči v CSS

Pokud je prvku nastaveno relative a jeho potomkovi absolute, pak se tento potomek bude pozicovat vůči svému rodiči, a ne vůči oknu prohlížeče.

V takovém případě se rodiči obvykle nastaví relative bez posunutí. V tomto případě se s tímto rodičem nic nestane, ale všichni jeho potomci se nyní budou pozicovat vůči němu.

Podívejme se na příklady.

Příklad

Nejprve jednoduše vytvořme rodičovský blok a potomka bez pozicování:

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

Результат:

Příklad

Nyní absolutně pozicujme zelený blok. Protože rodič nemá nastaveno relative, potomek se bude pozicovat vůči oknu prohlížeče:

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

Результат:

Příklad

Nyní nastavme rodiči relative. V tomto případě se potomek bude pozicovat vůči svému rodiči:

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

Результат:

Praktické úlohy

V následujících úlohách je hlavní blok vycentrován pomocí margin s hodnotou auto a ostatní jsou pozicovány vůči němu pomocí vlastnosti position.