Css ile Konumlandırma (Position)
18670 0

CSS İle Konumlandırma

Web sayfamızı kodlarken özellikle katmanlar ve diğer (x)html elemanların sayfadaki yerleşimlerini ayarlamak için css in position özelliğini iyi anlamamız gerekir. Bu makalede bu konudan bahsetmek istiyorum. Konunun en başında şunu söylemeliyim ki, bu sayfayı sonuna kadar her kelimesini okusanız da anlatılmak isteneni anlayamayabilirsiniz. Bunları anlamanın en güzel yolu kesinlikle uygulama yapmaktır. Tabi bu bahsettiğim aslında tüm programlama dilleri için geçerli bir kuraldır. 

Pozisyon olayına geçmeden önce (x)html elemanları içerisinde bir ayrımdan bahsedeyim. Elemanları blok düzeyi veya satır düzeyi olarak  iki sınıfta ayırmak mümkündür. Bu konumlandırmada farklılıklar oluşturduğu için önelidir. İkisi arasındaki temel fark: blok düzeyi elemanlar kendilerine yeni satır oluşturur yani satır başı yapar ve tüm satırı kendine ayırır (<div>, <p>, <h1>, <h2>...), satır düzeyi elemanlar ise satır içerisinde kullanılır ve bir kayma, boşluk oluşturmazlar(<a>, <strong>, <span>...). Yine temel farklarından biri de blok düzeyi elemanlara yükseklik ve genişlik verilebilirken satır düzeyi elemanlara verilmez.

 Eğer istenirse css'in "display" özelliği ile satır düzeyi (inline) elemanlar blok (block) düzeyi elemanlara veya blok düzeyi elemanlar satır düzeyi elemanlara çevrilebilir.

a{
    display:block;
}
div{
    display:inline;    
}

Bu kodları kullanırsanız a elemanının tüm satırı işgal ettiğini göreceksiniz.

Pozisyon (Position)

Css ile konumlandırma konusunda (x)html elemanlara değişik roller verebilirsiniz. Bunu yaparken "position" özelliğinden faydalanılır.

Static

Eğer position özelliği belirtilmezse varsayılan değer olarak position özelliği "static" kabul edilir. Bu konumlandırma şeklinde katmana dış boşluk değerleri vererek bir konum verilir. Css'te dış boşluk için margin özelliği kullanılır. Margin kullanımına örnekler:

/*Sağ, Sol, Alt, Üst her taraftan 10px dış boşluk ver.*/
#bir{
    margin:10px;    
}

/*Alttan üstten 10px, sağdan soldan 5px dış boşluk ver.*/  
#iki{
    margin:10px 5px;   
}

/*Üstten 10px, sağdan 5px, alttan 7px ve soldan 4px dış boşluk ver.
Üstten başlayarak saat yönünde*/  
#uc{
    margin:10px 5px 7px 4px;   
}

/*Veya değerleri tek tek verin*/
#dort{
    margin-left:4px;
    margin-right:5px;
    margin-top:10px;
    margin-bottom:7px;
}

Eğer "tasiyici" id'li bir katmanınız varsa ve aşağıdaki biçimlendirmeleri yaparsanız,

#tasiyici{
	width:100px;
	height:100px;
	margin:100px auto;
	background-color:#BCD8BF;
}

sayfanın üstünden 100px aşağıya inmiş ve yatayda ortalı bir kutucuk görürsünüz. Auto değeri genelde yatayda ortalamak için kullanılır. Sağdan soldan değer verilez ve auto denirse otomatik olarak eşit boşluklar verilir.

Margin (Dış Boşluk)

Static konumlandırma başlığı altında önemli bir konudan bahsedelim. Bu da "float" olayıdır. Eğer genişlik ve yükseklik değeri verilmiş katmanları yan yana dizmek isterseniz, katmanlar blok düzeyi olduğu için başlangıçta bu mümkün olmaz ve katmanlar alt alta dizilir.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		.ortak{
			width:50px;
			height:50px;
		}
		#bir{
			background-color:red;
		}
		#iki{
			background-color:blue;
		}
		#uc{
			background-color:yellow;
		}
	</style>
</head>
<body>
	<div id="bir" class="ortak"></div>
	<div id="iki" class="ortak"></div>
	<div id="uc" class="ortak"></div>
</body>
</html>

Katmanların Durumu

Katmanları yanyana getirebilmek için float uygulamalısınız. ".ortak" sınıfına float özelliği verelim ve katmanların yanyana dizildiğini görelim.

.ortak{
	width:50px;
	height:50px;
	float:left;
}

Float Uygulanmış Katmanlar

Float özelliği "left" olduğu gibi "right" değeri de almaktadır. Şimdi float kullanırken oluşan bazı problemlerden bahsedelim.

Float Problemleri

1-) Yalnızca kırmızı katmana float uygularsak aşağıdaki görüntü oluşur.

Mavi Katman Kayıp

Göründüğü üzere mavi katman kayıp.

ProbleminTanımı: Bir elemana float uygulandığında o eleman normal akışın dışına çıkar. Diğer elemanlar onu görmezden gelir. Mavi katman şu an kırmızı katmanın altındadır. Bu uygulama kırmızı katmanın etrafında yazılar varsa onları katman etrafına sardırmak için yapılabilir. Sorunu ortadan kaldırmak için mavi katmana "clear" uygulanmalıdır. Bu şekilde float olayının sonlanması ve normal akışa devam edilmesi söylenir.

#bir{
	background-color:red;
	float:left;
}
#iki{
	background-color:blue;
	clear:both;
}

2-) Float uygulanan katmanın dışında bir katman varsa kapsayamama sorunu oluşur. Örnekteki 3 katmanın dışına bir tasiyici katmanı oluşturalım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		#tasiyici{
			width:200px;
			margin:100px auto;
			background-color:#BCDDEF;
		}
		.ortak{
			width:50px;
			height:50px;
		}
		#bir{
			background-color:red;
		}
		#iki{
			background-color:blue;
		}
		#uc{
			background-color:yellow;
		}
	</style>
</head>
<body>
	<div id="tasiyici">
		<div id="bir" class="ortak"></div>
		<div id="iki" class="ortak"></div>
		<div id="uc" class="ortak"></div>
	</div>
</body>
</html>

Kapsayamama 1

Şimdi sarı katmana float uygulayalım ve sonucu görelim.

Kapsayamama 2

Problemin Tanımı: Daha önce söylediğimiz gibi float uygulanan eleman normal akışın dışına çıkar. Kapsayıcı eleman olan "tasiyici" id'li katman sarı katmanı yüksekliğe dahil edemedi. Bunun çözümü 2 yolla olabilir. Birincisi kapsayıcı elemana "overflow" özelliği verilir. Bu taşma varsa otomatik boyutlan anlamına gelecektir.

#tasiyici{
	width:200px;
	margin:100px auto;
	background-color:#BCDDEF;
	overflow:auto;
}

İkincisi ise sarı katmandan sonra block düzeyi bir elemana ilk problemde olduğu gibi "clear" uygulamak. Yeri önemlidir "tasiyici" id'li katmanın bitiş tagından önce, "uc" id'li katmanın bitiş tagından sonra olmalıdır.

 

<body>
    <div id="tasiyici">
        <div id="bir" class="ortak"></div>
        <div id="iki" class="ortak"></div>
        <div id="uc" class="ortak"></div>
        <br style="clear:both;"/>
    </div>
</body>

Relative

İlgili katmanın position özelliğini "ralative" yapmak göreceli konumlandırma yapacağınızı söylemektir. Katman yanındaki elemana göre bir konum alacaktır. En önemli özelliği şu ki: diğer katmanlar normal akışına devam eder. Yani relative olarak ayarlanmış katman yeni pozisyonuna gitmiş bile olsa diğer katmanlar eski yerindeymiş gibi davranacaktır.

Relative ve daha sonraki konumlandırma işlemlerinde "left", "right", "top", "bottom" kullanılacaktır. Aynı şekilde bu özellikler static konumlandırmada kullanılmaz.

Yukarıdaki uygulamanın ilk haline geri dönelim,

Katmanlar Başlangıç

sadece mavi katmana şu özellikleri verelim ve sonuçlarına bakalım.

#iki{
    background-color:blue;
    position:relative;
    left:20px;
    top:30px;
}

Relative Uygulandıktan Sonra

Görüldüğü üzere mavi katman soldan 20px, yukarıdan (kırmızı katmandan) 30px uzaklaştı ve daha önemlisi sarı katman pozisyonunu değiştirmedi. Aynı şekilde kapsayıcı eleman "tasiyici" da yükseklik olarak bir değişikliğe uğramadı.

Absolute

Mutlak konumlandırma için kullanılır. Eğer üst eleman relative olarak tanımlanmışsa konumlandırma üst elemana göre yapılır aksi halde kök elemana(<body>) göre konumlandırma yapılır.  Yine söylenecek en önemli şeylerden biri de margin özelliğinin static ve relative konulandırmada kalmış olduğudur. Yukarıda örneğimizi ilk haline getirdiğimizi hatırlayın ve yine sadece mavi katmana özellikler verelim.

Absolute 1

Dıştaki katman yani "tasiyici" relative olmadığı için mavi katman body elemanına yani pencereye göre konumlandı. Aynı zamanda diğer katmanlar mavi katman yokmuş gibi davrandı. Yani relative'de olanın tam aksine olduğunu görüyoruz. Bir de "tasiyici" katmanına relative özelliği vererek deneyelim.

#tasiyici{
    width:200px;
    margin:100px auto;
    background-color:#BCDDEF;
    position:relative;
}

Absolute 2

Bu kez konumlandırma kapsayıcı elemana göre yapıldı ve mavi katman hala diğer katmanların umurunda değil :)

Yeri gelmişken mutlak konumlandırma yapılırken katmanlar üst üste bindiğinde hangisinin daha üstte olacağını belirlemek için "z-index" özelliğinden yararlanılır. Yukarıda yalnızca mavi katman absolute olduğu için doğrudan o en üstte görünüyor. Şimdi sarı ve mavi katmana absolute değerler verelim, sağa yaslayalım ve üst üste gelmelerini sağlayalım. Bu işlemi yaparken kapsayıcı elemanın yükseklik değeri sadece kırmızı katmana göre ayarlanacağından dış katmana bir yükseklik değeri de vermemiz gerekir.

#tasiyici{
	width:200px;
	height:150px;
	margin:100px auto;
	background-color:#BCDDEF;
	position:relative;
}
.ortak{
	width:50px;
	height:50px;
}
#bir{
	background-color:red;
}
#iki{
	background-color:blue;
	position:absolute;
	right:20px;
	top:30px;
}
#uc{
	background-color:yellow;
	position:absolute;
	right:30px;
	top:50px;
}

z-index 1

İki katman da absolute olduğundan z-index değeri büyük olan sarı katman üstte durmaktadır. Fakat biz z-index değeri falan vermedik. Sayfada yazım sırası sonda elemanın z-index değeri daha büyüktür. Bunu elle değiştirmek için z-index değerini kendimiz vermeliyiz, z-index değeri büyük olan katman üstte olacaktır.

#iki{
	background-color:blue;
	position:absolute;
	right:20px;
	top:30px;
	z-index:10;
}
#uc{
	background-color:yellow;
	position:absolute;
	right:30px;
	top:50px;
	z-index:9;
}

z-index 2

Gördüğünüz gibi mavi katmanın z-index değeri sarı katmanınkinden büyük olduğu için mavi katman üste çıktı.

Fixed

Bu konumlandırma şeklinde istediğiniz katmanı yada elemanı sayfanızda istediğiniz yere çakılı olarak bırakabilirsiniz. Çakılıdan kastım sayfayı kaydırma çubukları ile kaydırsanız dahi fixed olarak belirlenen eleman sabit bir şekilde kalacaktır. Bu konumlandırmada dıştaki elemanın relative olması da farketmez kendini pencereye göre konumlandırır. Özellikle bazı sayfalarda reklam alanlarının sayfada aşağıya inseniz de sabit kaldığını görürsünüz. Fixed özelliğine en uygun örnek olarak bu gösterilebilir.

Yukarıdaki uygulamanın son haline 2 eklenti yaptım mavi katmanı "position:fixed" ve tasiyici katmanı kaydırma çubukları çıksın diye "height:3000px" şeklinde ayarladım. Sonucu görmek için tıklayın.

^
X