CSS'te Ebeveyne Göre Konumlandırma

Bir öğeye relative değeri atanırsa ve onun alt öğesine - absolute atanırsa, bu alt öğe tarayıcı penceresine göre değil, kendi ebeveynine göre konumlandırılacaktır.

Genellikle, bu durumda ebeveyne kaydırmalar olmadan relative değeri verilir. Bu durumda bu ebeveynle hiçbir şey olmaz, ancak tüm alt öğeleri artık ona göre konumlandırılacaktır.

Örneklerle inceleyelim.

Örnek

Öncelikle konumlandırma olmadan bir ebeveyn blok ve bir alt blok yapalım:

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

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Örnek

Şimdi yeşil bloğu mutlak olarak konumlandıralım. Ebeveyne relative verilmediği için, alt öğe tarayıcı penceresine göre konumlandırılacaktır:

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

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

Örnek

Şimdi ebeveyne relative verelim. Bu durumda alt öğe kendi ebeveynine göre konumlandırılacaktır:

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

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Pratik Görevler

Aşağıdaki görevlerde ana blok auto değerine sahip margin ile ortalanmıştır, diğerleri ise position özelliği kullanılarak ona göre konumlandırılmıştır.