CSS'te Mutlak Ebeveyne Göre Konumlandırma

Önceki derste, bir ebeveyne relative atanırsa, onun soyundan gelenlerin ona göre mutlak konumlanacağını inceledik. Ebeveyn öğesinin normal akıştan çıkmasını istemediklerinde genellikle bu şekilde yaparlar.

Ebeveynin absolute değeri atanmış olması da mümkündür. Bu durumda, absolute değerine sahip soyundan gelenler de tarayıcı penceresine göre değil, bu tür bir ebeveyne göre konumlanacaktır:

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

Результат: