CSS'de Elemanların Mutlak Konumlandırılması

Bu derste elemanların mutlak konumlandırılmasını inceleyeceğiz. Bu, elemanları sayfanın belirtilen koordinatlarına yerleştirmenize olanak tanır. Örneğin, bir elemanı sayfanın üstünden 100px ve soldan 200px konumuna yerleştirebilirsiniz. Eleman oraya, diğer elemanların ne olduğuna bakılmaksızın taşınacak ve sadece onların üzerine gelecek. Bu durumda elemanın belgenin normal akışından çıktığı söylenir: diğer tüm elemanlar, bizim elemanımız yokmuş gibi davranacaktır.

Bir elemanı mutlak konumlandırılmış yapmak için, bu elemana position özelliğini absolute değerinde ayarlamak gerekir. Bu özelliğe ek olarak, biri dikey koordinatı, diğeri yatay koordinatı belirleyen iki özellik daha gerekir.

Dikey için üstten veya alttan bir boşluk belirtilmelidir. Üstten boşluk top özelliği ile, alttan boşluk ise bottom özelliği ile belirlenir. Yatay için soldan veya sağdan bir boşluk belirtilmelidir. Soldan boşluk left özelliği ile, sağdan boşluk ise right özelliği ile belirlenir.

Örnekler üzerinde inceleyelim.

Örnek

İlk olarak, konumlandırma olmadan iki blok oluşturalım (body'nin varsayılan olarak margin'i olduğundan elemanların pencere kenarına yapışık olmadığına dikkat edin):

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

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

Örnek

Şimdi yeşil bloğa mutlak konumlandırma vererek, onu üstten 150px ve soldan 100px konumuna yerleştirelim:

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

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

Örnek

Şimdi yeşil bloğu üstten 0px ve soldan 0px konumuna yerleştirelim:

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

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

Örnek

Şimdi yeşil bloğu üstten 0px ve sağdan 0px konumuna yerleştirelim:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Örnek

Şimdi yeşil bloğu alttan 0px ve sağdan 0px konumuna yerleştirelim:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Örnek

Şimdi yeşil bloğu alttan 0px ve soldan 0px konumuna yerleştirelim:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pratik Görevler

Mutlak konumlandırma kullanarak blokları aşağıdaki şekilde yerleştirin: