CSS'te Elemanların Göreli Konumlandırılması

Göreli konumlandırma, position özelliği için relative değeri kullanılarak ayarlanır. Bu tür konumlandırma, elemanların mevcut konumlarından belirli bir miktar kaydırılmasına olanak tanır. Bu durumda, sayfadaki diğer tüm elemanlar, elemanın başlangıçta olduğu yerde durduğunu varsayar. Yani, bu konumlandırma türünde eleman normal akıştan çıkmaz.

Mevcut konumdan kaydırmalar, top, right, bottom ve left özellikleri ile belirlenir.

Örnek

İlk olarak, konumlandırma uygulamadan iki blok oluşturalım:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Örnek

Şimdi ilk bloğa relative ekleyelim. Henüz bir kaydırma belirtmediğimiz için bu hiçbir şeyi değiştirmeyecek:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Örnek

Şimdi bloğumuzu top özelliğini belirleyerek yukarıdan 30px kaydıralım. Bu durumda diğer tüm elemanlar, bloğumuzun başlangıçtaki yerinde kaldığını varsayacaktır:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Örnek

Ayrıca bloğumuzu left özelliğini belirleyerek soldan 40px kaydıralım:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	left: 40px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Örnek

top, right, bottom ve left özelliklerinin negatif değerleri ters yönde kaydırır. Örneğin, top için pozitif bir değer aşağı kaydırırken, negatif bir değer yukarı kaydırır.

İkinci bloğumuzu top özelliğine negatif bir değer vererek yukarıya 40px kaydıralım:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Pratik Görevler

Aşağıdaki bloklar verilmiştir:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Bu blokları göreli konumlandırma kullanarak aşağıdaki şekilde kaydırın: