CSS'de Pozisyonlar - CSS Position-Php Bilgi Platformu

CSS pozisyon elemanları adından da anlaşılacağı üzere, elemanların sayfa içerisindeki pozisyonlarını belirlemeye yarar. Elemanın etrafında ne kadar boşluk olacağı, neyin arkasında ya da neyin kenarında olacağına CSS position özelliği ile sağlayabiliriz.
Elementleri pozisyonlamada top, bottom, left, ve right özelliklerini kullanırız. Ancak bu değişkenler CSS pozisyon özelliklerini başta belirtmeden kullanılamaz.Ayrıca bu özellikler farklı konumlandırma ayarları ile çalışmaktadırlar.. Birazdan vereceğim örneklerle ne demek istediğimi acıkca anlayacağınızı umuyorum.

Statik Konumlandırma

HTML elemanlar ana ayarlarında (default) statik bir konumlandırmaya ayarlanmıştır.Static konumlandırmada elemanlar sayfanın normal kod akışına göre dizilmektedirler.. Yani ilk önce bir resim kullandıysak ve sonrasında ise bir yazı kullanırsak bunlar kullandığımız sıraya göre HTML de yer alırlar.. İşte pozisyon özelliği ile bunu ortadan kaldırabiliriz.

Fixed Pozisyon

Çoğu web sitesinde karşılaştığımız bir özellik olan sabitleme genellikle reklam alanlarında yada kullanıcların sürekli görmesini istediğimiz bölümlerde kullanılan bir özellik haline gelmiştir.. Sabit konumlamadan kastımız içerisinde kullanacağımız bölümü sayfada aynı bölgede kalmasını sağlamaktan başka birşey değildir. Bu özelliğin adı aslında fixed olarak adlandırılmıştır.. Bir örnek yapalım;

1p.yazi_fixed
2 {
3 position:fixed;
4 top:30px;
5 right:5px;
6 }

Yukarıda p taginin yazi_fixed sınıfında bulunan alanı, yukarıdan aşağıya 30px ve sağdan 5px uzaklığında hep aynı yerde kalmaktadır. Sayfa aşağıya doğru sürüklense dahi bu eleman position:fixed özelliği sayesinde yerini her daim korumaktadır.
Not: İnternet Explorer’da fixed değerini kullanabilmek için kaynak kodunun başında !DOCTYPE belirtecinin kullanılması gerekir.
Sabit konumlandırışmış öğeler, yukarıda bahsettiğimiz HTML’in normal akışını değiştirir.. Ve diğer elemanlar ile örtüşebilir. Örtüşmeden kastımız ise belirlediğimiz bölgeye başka bir eleman gelecekse bunun üzerinde kalır.

Relative Pozisyon

Relative özelliği alan bir elaman sayfada bağıl olarak istenilen bölgeye hitap etme özelliğine sahiptir.Aşağıda vereceğim örneği kendi bilgisayarınızda deneyiniz;

01h2.pos_sol
02 {
03 position:relative;
04 left:-20px;
05 }
06 h2.pos_sag
07 {
08 position:relative;
09 left:20px;
10 }

Yukarıda sağ ve soldan alacağı boşluk değerleri ile başlıkları sayfanın belirlediğimiz px boyutlarında pozisyonlama değeri verdik.Bu relative özelliğinin bir güzelliği daha var ki hem kullandığımız pozisyon değeri diğer ayarların üstünde olabiliyor hem de bu özelliğe negatif değerler de verebiliyoruz, aşağıdaki örnekte kullanılan kodları kendiniz denerseniz iki başlığın da üst üste bindiğini göreceksiniz;

1h2.pos_top
2 {
3 position:relative;
4 top:-50px;
5 }

Absolute Pozisyonu

Absolute Pozisyon Mutlak pozisyon olarak geçen, absolute pozisyonlu elemandan önceki ilk elemanı static yaparak sadece kendine verilen bir özellik katmamızı sağlar.. Absolute sadece belirlenen sınıfa etki ederken relative tüm sayfaya bağıl olarak hareket eder.Aşağıdaki örneği bir h2 sınıfı ve başka bir sınıf daha yerleştirerek deneyiniz;

1h2
2 {
3 position:absolute;
4 left:100px;
5 top:150px;
6 }

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.Absolute özelliği de fixed özelliğinde olduğu gibi diğer elemanların üzerinde çıkabilir.

Örtüşen Elemanlar

Eğer bir eleman default değerlerinin dışında bir pozisyon değeri almışsa diğer elemanlarla ötüşebilir.
z-index özelliği ile hangi elemanın hangisini önünde ya da arkasında olduğunu biz seçebiliriz. Diyelim bir resim koyduk ve bunu arkaplan resmi gibi üzerinde yazı çıkmasını istiyorsak bu defa örneğimiz aşağıdaki gibi olmalı;

1img
2 {
3 position:absolute;
4 left:0px;
5 top:0px;
6 z-index:-1
7 }

Yukarıdaki kodları kullanarak bir resim atar ve daha sonra da herhangi bir yazı yazarsak, bu yazı resmin üzerinde çıkacaktır.

Dipnot

Bu yazı 9 Haziran 2010 Çarşamba günü yazılmıştır. Bulunduğu kategori : css,photoshop,position,pozisyon,sss,statik,tasarım. Yazdığım yazıları RSS 2.0 sistemini kullanarak takip edebilir, dilerseniz yorum yapabilirsiniz. Unutmadan, Bu yazı sizler tarafından tam tamına defa okunmuştur.

Php Bilgi Platformu

Reklam

Reklamlar

9 Haziran 2010 Çarşamba