Poziționarea relativă la părintele absolut în CSS

În lecția anterioară am aflat că, dacă unui părinte i se atribuie relative, atunci descendenții săi se vor poziționa absolut relativ la acesta. Acesta este un mod obișnuit de a face, când nu se dorește ca elementul părinte să iasă din fluxul normal.

Se poate întâmpla și ca părintele să aibă atribuit absolute. În acest caz, descendenții cu absolute se vor poziționa și ei relativ la acest părinte, și nu relativ la fereastra browserului:

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

Результат: