Пазіцыянаванне адносна абсалютнага бацькі ў 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;
}

Результат: