Позициониране спрямо абсолютен родител в CSS

В предишния урок разгледахме, че ако на родителя зададем relative, то неговите наследници ще се позиционират абсолютно спрямо него. Това е най-често срещаният подход, когато не искаме родителският елемент да излезе от нормалния поток.

Възможно е и родителят да има зададен absolute. В този случай наследниците с absolute също ще се позиционират спрямо такъв родител, а не спрямо прозореца на браузъра:

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

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

Результат: