Daha önce ‘Relative + Absolute ile yorum kutusu’ baÅŸlıklı bir yazı yazıp, yazı da -ucundan da olsa- CSS’de pozisyonlamaya deÄŸinmiÅŸtim. Bu yazı da -biraz da gelen istekler üzerine- iÅŸe bir daha teknik açıdan bakmak, ve ardından z-index’e rahatsız etmeden dokunmak istiyorum.

Bir odanız olduğunu düşünün, küçük şirin bir oda. Bu güzel odayı parkeleyip üzerine bir de halı koymak istiyorsunuz.

Biliyorsunuz ki, parkeleri istediğiniz yere döşeme gibi bir şansınız yok. Tüm parçaları sırayla yan yana sıkı bir şekilde dizerek, ileride oluşabilecek bir ayrılma, kayma gibi durumu ortadan kaldırmış olursunuz. Parkeleri bir güzel dizdikten sonra, almış olduğunuz halınızı odanızın her tarafına serebilirsiniz, burada tamamen özgürsünüz.

‘Float’ kolaydır, ‘Float’ zordur.

CSS’in 1. versiyonundan beri kullanılan Float elementinin yardımıyla, aynı parke parçalarını yan yana dizerek oluÅŸturduÄŸunuz döşeme gibi, div’lerinizi yan yana dizerek sayfanızı oluÅŸturabilirsiniz. Float bu nedenle çok kolaydır, aynı tablolarda olduÄŸu gibi, öğeleri yan yana diziyor, ve içeriÄŸini dolduruyorsunuz. Fakat float aynı zamanda çok da zor olabilir, eÄŸer gerçekten zor layoutlarla karşılaşırsanız.

EÄŸer CSS ile ilgileniyorsanız, Float’u duymamış olmanız mümkün deÄŸildir. Yine de ayrıntılı bilgi isterseniz, W3Schools‘u ziyaret edebilirsiniz, zira biz hemen konumuza gelmek istiyoruz.

‘position:absolute/relative/static/fixed’

DediÄŸim gibi, sevgili W3C birinci versiyondan beri varolan Float’tan sonra, ikinci versiyonda yukarıdaki durumu aklına getirmiÅŸ ve bizleri düşünüp ‘position’ diye bir özellik çıkarmış.
Peki bu özellik bize nasıl yardımcı oluyor? Position, odamıza istediğimiz yere halımızı sermemize yardımcı oluyor!
Yani ‘position’ ile herhangi bir öğeyi, deÄŸerleri atayarak sayfamızın herhangi bir yerine pozisyonlama ÅŸansımız var.

1) Position:static;

‘Static’ ‘position’ özelliÄŸinin standart deÄŸeridir. Bu deÄŸeri atadığınız bir öğe herhangi bir yere kaydırılmadan olduÄŸu yerde durur. EÄŸer ’static’ deÄŸeri atanmış bir div’e ‘top’,'left’,'right’,'bottom’ deÄŸerlerini atarsanız, bu deÄŸerler görmezlikten gelinecektir.

2) Position:relative;

‘Relative’ özelliÄŸini atadığınız bir öğe, bulunduÄŸu yerden itibaren kaydırılacaktır. Fakat bu deÄŸeri atadığınız bir öğe, aÅŸağısındaki öğelere etki etmeyecektir. Yani örneÄŸin yukarıdan 10px kaydırdığınız bir div aÅŸağısında bulunan diÄŸer bir div’i aÅŸağıya kaydırmayacak, bilakis onun üzerine kayacaktır. Relative ile ilgili daha fazla bilgiye bu makaleden ulaÅŸabilirsiniz.

#metin { position: relative; top: 15px; right: 0; }

3) Position:absolute;

Bu deÄŸerleri atadığınız bir öğe, diÄŸer öğelerin etkisi olmadan sayfa başından itibaren kaydırılmaya baÅŸlanacaktır. ‘Relative’ gibi yine ‘Absolute’un diÄŸer öğelere etkisi olmayacaktır.

#metin { position: absolute; top: 0; right: 0; }

Bu ÅŸekildeki bir stil, önceden oluÅŸturduÄŸumuz ‘metin’ stilinin içindeki metni sayfanın en üst-saÄŸ köşesine pozisyonlayacaktır.

#metin { position: absolute; bottom: 0; right: 5px; }

Bu şekildeki diğer bir stil ise, metnimizi sayfanın en altına pozisyonlayacak, sağ köşeden 5 piksel kaydıracaktır.

4) Position:fixed;

‘Fixed’ deÄŸeri öğemizi aynı ‘absolute’ gibi pozisyonlar, fakat sayfa aÅŸağıya kaydırıldığında öğe de sayfa ile birlikte aÅŸağıya kalmaz, bilakis bulunduÄŸu yerde asılı kalır. Sayfadaki diÄŸer öğeler aÅŸağıya inseler bile, öğe inmeyecek ve pozisyonlandığı yerde kalacaktır.

Dikkat: Internet Explorer 7 bu özelliÄŸi hatalı yorumladığı için, herÅŸey doÄŸru olmasına raÄŸmen, ‘position:fixed;’ deÄŸerini atadığınız bir öğe sayfa ile birlikte aÅŸağı kayacaktır.

Alt deÄŸerler: top, right, bottom, left

‘Absolute’, ‘Relative’ veya ‘Fixed’ özelliklerinden birini atadığınız bir öğeyi bulunduÄŸu yerden kaydırmak için bu dört deÄŸerden yardım alırız. Bir stilimizde en fazla iki adet deÄŸer bulunabilir, fakat karşıt deÄŸerler (örn. top ve bottom) aynı stilde bulunmaz.
Normal deÄŸerlerde ‘Top’ bir öğeyi yukarıdan aÅŸağıya kaydırırken, ‘Bottom’ deÄŸeri öğeyi aÅŸağıdan yukarıya doÄŸru kaydırır. Aynı ÅŸekilde ‘Right’ bir öğeyi saÄŸdan sola doÄŸru kaydırırken, ‘Left’ soldan saÄŸa doÄŸru kaydırır.

#metin { position: absolute; bottom: 10px; left:10px; }

Bu stili atadığımız bir öğe, aşağıdan 10 piksel yukarıda ve soldan 10 pixel sağda duracaktır.

#metin { position: absolute; top: 50px; right:50px; }

Bu stili atadığımız bir öğe, yukarıdan 50 piksel aşağıya, sağdan 50 piksel sola kaydırılacaktır.

#metin { position: absolute; top: -10px; right:-10px; }

Bu stili atadığımız bir öğe, yukarı-sağdan 10 piksel sayfa dışına çıkacaktır. Değerler eksi (-) olduğu için, kaydırma da ters yönlere olacaktır.

Z-index

Ä°ki adet div’imizin olduÄŸunu düşünün. Her ikisi de ‘position:absolute’ yardımı ile pozisyonlandırılmış, fakat üst üste duruyorlar;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#div1 { 
	width:200px; 
	height:200px; 
	background:#666; 
	position:absolute; 
	top:50px; 
	left:50px; 
} 
 
#div2 { 
	width:200px; 
	height:200px; 
	background:#777; 
	position:absolute; 
	top:70px; 
	left:70px; 
}

1
2

	<p id="div1">Bu div1!</p>
	<p id="div2">Bu da div2!</p>

Sayfamızda test ettiğimizde görüntü şu şekilde olacaktır;

Gördüğünüz gibi, ‘div2′ ‘div1′in üzerinde duruyor. Z-index ile hangi öğenin ilk sırada yer alacağına karar verebilirsiniz. Bu örnekte, div1′i div2′nin üzerine taşımamız için, z-index’in yardımına ihtiyaç duyuyoruz;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#div1 { 
	width:200px; 
	height:200px; 
	background:#666; 
	position:absolute; 
	top:50px; 
	left:50px; 
	z-index:2; 
} 
 
#div2 { 
	width:200px; 
	height:200px; 
	background:#777; 
	position:absolute; 
	top:70px; 
	left:70px; 
	z-index:1; 
}

Gördüğünüz gibi, CSS’in bizlere sunduÄŸu, kullanılmayı bekleyen bir çok özellik var. Bize düşen ise sadece kullanmak.

Etiketler: css, pozisyonlandırma, xhmtl, z-index