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.

Tüm yazıda kullanacağımız örnek div aşağıdaki gibi olsun, yazı ilerledikçe div’in stilleri üzerine oynayıp sonuçlara göz atacağız.

Merhaba!

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;

Bu div1!

Bu da div2!

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;

Bu div1!

Bu da div2!

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