Bir alan veya öğenin konum türünü belirleyebilirsiniz. Bunun için position özelliği kullanılır. Bu özellik, bir öğenin nihai olarak nasıl konumlandırılacağını belirtir. Toplamda dört farklı konumlandırma seçeneği bulunmaktadır.
• static – özel bir konumlandırma yapılmaz ve normal metin akışı gerçekleşir.
• relative – öğenin normal konumuna veya başlangıç konumuna göre göreceli bir konumlandırma gerçekleşir.
• absolute – öğelerin konumu top, bottom, left ve right özellikleriyle mutlak olarak belirlenir. Mutlak konumlandırılan öğeler, normal metin akışının dışındadır. Mutlak konum, öğenin üst öğenin kenarlarına göre hesaplanır (ancak bu üst öğenin position: static özelliğine sahip olmadığı durumda).
• fixed – öğe mutlak olarak konumlandırılır. Kaydırma yapılırken öğe sabit kalır.
İlk iki tür değişken konumlandırma sağlar. Burada, öğeler birbirlerine göre konumlandırılır. İlerleyen iki örnek, bu konumlandırma türünün nasıl olabileceğini gösterebilir:
• Öğe 2, Öğe 1'e göre 30 piksel kaydırılarak yerleştirilir.
• Öğe 2, Öğe 1'in arkasına yerleştirilir.
Fix ve static ile farklıdır. Bu şekilde elemanlar belirli noktalara yerleştirilebilir. Konumlandırma talimatları, üst öğe veya tarayıcı penceresine göre belirlenir. Bir örneğe bakalım:
• Öğe 1, tarayıcı penceresinin sağ üstünden 30 piksel ve üstünden 20 piksel kadar uzakta yerleştirilir.
Ardından, konumlandırma türlerinin ayrıntılı olarak tanıtılacağı. Ancak önce bir not: Öğelerin konumlandırılmasıyla ilgili olarak, yüzen öğelerin önemli bir rol oynadığı belirgin hale gelir. Bu önemli CSS prensibi hakkında bir sonraki öğreticide detaylı bir şekilde ele alacağım. Temel olarak bu konumlandırmadan, web sayfasındaki öğelerin nasıl belirlendiğine odaklanır. Burada öğeler mümkün olduğunca belirli bir yönde sıkıştırılır. Konumlandırma türü, öğe akışını açıkça belirlemeyi sağlar.
İlişkisel Konumlandırma
İlişkisel konumlandırma kullanarak position: relative ile iki şey gerçekleşir:
• Kutu normal akışından çıkarılır.
• Öğenin orijinal yeri rezerve edilir.
Orijinal yerin rezerve edilmesi nedeniyle diğer öğeler, öğenin gerçekte hala yerindeymiş gibi davranırlar.
Bir örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kutu 1</div>
<div>Kutu 2</div>
<div>Kutu 3</div>
</body>
</html>Üç kutu tanımlanmıştır. İki ve üçüncü kutular konumlandırma talimatı almamıştır. Bu nedenle normal belge akışını takip ederler. Ancak, Birinci kutu ilişkisel olarak konumlandırılmıştır. Bu nedenle, İkinci ve üçüncü kutular, Birinci kutunun etkisi altında hiçbir şekilde kalmazlar. Bu kutular, Birinci kutunun yerini almazlar. top, bottom, left ve right ifadeleriyle kutuların konumlandırılması sağlanır. İlişkisel konumlandırmada, düz metin akışındaki orijinal pozisyon temel alınır.
• top: 25px – Kutu 25 piksel aşağıya doğru kaydırılır. Kutunun normal konumunda, yukarıya 25 piksel eklenir.
• right: 25px – Kutu 25 piksel sola kaydırılır. Kutunun normal konumunda, sağa 25 piksel eklenir.
Piksel değerleri, orijinal konuma göre belirlenmelidir. Değer nerede ekleneceğini belirler, yani yukarıda ve sağda. Bu yön önemlidir. Bu ifadeler, kutunun nereye kaydırılacağını belirlemez.
Absolut Konumlandırma
Absolut konumlandırmaya devam ediyoruz. Bu konum türü, öğeyi tamamen belge akışından çıkarır. Sayfadaki diğer öğeler, öğenin var olmadığını varsayarak davranır.
Bir örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Kutu 1</div>
<div>Kutu 2</div>
<div>Kutu 3</div>
</body>
</html>Burada da üç kutu tanımlandı. Birinci kutu mutlak konumlandırılmıştır.
İlişkisel konumlandırmada olduğu gibi, Birinci kutu için yer ayrılmamıştır. İkinci ve üçüncü kutular yukarı kayar.top, right, bottom veya left konumlandırma ifadeleri artık kutunun Flow içindeki orijinal konumuna dayanmaz. Daha ziyade, ifadeler çevreleyen bir sonraki öğeye, relative, absolute veya fixed ile konumlandırılan bir sonraki öğeye dayanır. Çevreleyen bir öğe yoksa, konumlandırma en üstteki öğeye, yani html a dayalı olarak gerçekleşir.
fixed ile konumlandırma
position: fixed ile öğeler sabitlenebilir. İşte bir örnek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Yalnızca kısa bir süre için en yeni öğretici veya video eğitimi çevrimiçi görüntüleme veya İndirme kategorisinden içerik ücretsizdir. Daha fazlasını burada öğrenin ...</p>
</body>
</html>Sabitlenmiş kutu ile kaydırma yapılmaz, her zaman atanmış pozisyonunda durur.
Sabitlenmiş kutular için çevreleyen öğe her zaman tarayıcı penceresidir.
Lütfen unutmayın ki özellikle eski tarayıcılarda ögelerin sabitlenmesiyle ilgili ciddi sorunlar olabilir. Örneğin IE6 burada aslında yapması gerekeni yapmaz. Web sitelerinizi bu tarayıcı için de optimize etmek isteyenlerin iki seçeneği vardır:
• Sabitlenmiş kutulardan vazgeçin.
• IE için hileler kullanın.
Bir hile kullanmak istiyorsanız, size http://thestyleworks.de/tut-art/iewinfixed.shtml sitesini öneririm. Bu sitede bu tarayıcı için sabitlenmiş kutuları nasıl yapıldığı bir JavaScript örneği ile gösterilmektedir.
