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:
<div id="parent">
<div id="child"></div>
</div>
#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;
}
:
400px boyutunda mutlak konumlandırmalı
kare bir blok yapın. İçinde 50px boyutunda
iki blok daha yapın. İlk bloğu ebeveynin sağ üst
köşesine, ikinci bloğu ise alt sol köşeye yerleştirin.