CSS Konumlandırma (Position)
CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.
Sabit(Fixed) Konumlandırma
Sabitkonumlandırma Mutlak Konumlandırmanın bir alt katagorisidir. Sabitkonumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle websayfasında bir elementin konumu sabitlemek için kullanabiliriz. Sabit konumladırılma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazıkki IE 6 bu özelliği desteklemiyor.IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. Ama bu problemi javascript ile çözümü vardır.
body {
background-color: #0C0;
margin:0;
height: 2000px; /*kaydirma cubugu cikmasi icin*/
}
.kutu_mavi {
width: 400px;
height: 200px;
background-color:#3CC;
padding: 50px;
margin: auto;
}
.kutu_kirmizi {
width: 40px;
height: 20px;
background-color:#F00;
position:fixed;
}
</style>
</head>
<body>
<div class="kutu_mavi">
<div class="kutu_kirmizi"> </div>
</div>
</body>
Göreceli Konumlandırma(position:relative)
Göreceli konumlandırma anlaşılması kolay bir konsepttir. Bir elemente göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elementin(göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebilriz. Eğer biz elementin üst(top) değerine 20px tanımlarsak element bulunduğu yerden 20px aşağıya kayacaktır, eğer elementin sol(left) değerini 20px olarak tanımlarsak elementimiz soldan 20px sağa doğru kayacaktır.
Göreceli konumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır. Bu konumlamada nesnelerin konumu kendisinden önceki nesnenin konum değerlerini (top, left, right, bottom) sıfır kabul ederek konum belirlemeleriyle oluşur.
Göreceli konumlandırmada nesnelerin birbirleriyle olan mesafelerini boyutları belirler.
Relative pozisyonlandırmada; öğe, bulunduğu yerden ititbaren, top, right, bottom, left özellikleriyle, ve bu özelliklere verdiğiniz değerler ölçüsünde kayma yapar. Ancak bu, relative pozisyon verdiğiniz öğenin altındaki öğeleri etkilemez. Onlar bulundukları yerde kalırlar. Dolayısıyla aşağı kaydırma verdiğiniz öğeniz, alttakiler yerlerinde durduğu için onların üzerine çıkar.
Mutlak(Absolute) Konumlandırma
Göreceli konumlandırma Normal Akış’ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan elementbulunduğu yere boşluk bırakmayacaktır. Mutlak pozisyonla tanımlanan konum, nesnenin içinde bulunduğu elemana göredir. Diğer elementler normal akıştakiyerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi.
Mutlak konumlandırılmışelementin konumu en yakındaki üst elementin konuma bağlıdır. Eğer birata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.
Göreceli olarak konumlandırılmış bir elementin içindeki Mutlak Konumlandırılmış bir element içerik blokunun üst, sağ, sol ve alttından hizalandıralabilir. Bu kullanım bize bir çok uygulmada yardımcı olacaktır ve bu kullanım ile çok güzel sonuçlar elde edeceğiz.
body {
background-color: #0C0;
margin: 0;
height: 2000px; /*kaydirma cubugu cikmasi icin*/
}
.duvarlar {
width: 300px;
height: 250px;
background-color: #3CC;
top: 70px; /*konumlandirma yapilmadigindan ise yaramaz*/
}
.pencere_sol {
width: 70px;
height: 70px;
background-color: #F00;
position: absolute; /*mutlak pozisyonlama*/
left: 22px;
top: 36px;
}
.pencere_sag {
width: 70px;
height: 70px;
background-color: #F00;
position: absolute; /*mutlak pozisyonlama*/
left: 208px;
top: 36px;
}
.kapi {
width: 100px;
height: 120px;
background-color: #FF0;
position: absolute; /*mutlak pozisyonlama*/
left: 100px;
top: 132px;
}
</style>
</head>
<body>
<div class="duvarlar">
<div class="pencere_sol"></div>
<div class="pencere_sag"></div>
<div class="kapi"></div>
</div>
İnsanların konumladırma ile iligi genel problemeleri hangikonumlandırma seçeneğinin ne işe yaradığını unutmalarıdır. Göreceli Konumlandırmasayfadaki elementin başlangıç durumuna göre göreceli bir durumda olduğunu, oysa Mutlak Konumlandırmanın en yakın ata elemente veya içerik blokunagöre göreceli değer içerdiğidir.
Mutlak Konumlandırma ile yerleştirilmiş element sayfada elementi normal akışın dışına çıkarır. Bu element diğer elementlerinüzerine binecektir. Bu üstte kalma altta kalma işinide z-index özelliğiile hallede bilriz. z-index değeri büyük olan element üstte küçük olan element ise altta kalacaktır.
z-index
Yapısı : z-index: <deger>
Aldığı Değerler : <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok
Browser Uyumu:
Internet Explorer 4+(kısmen: IE4 den sonra auto ve sayısal değerleri destekliyor)
Netscape 4+(kısmen) NN6+ sonra tümünü destekler
Opera 5.0+
CSS Profile 2.0
Örneğin geniş bir blok içindeki bir parafratakiyazıların sağ ve altta olmasını istiyorsak. Dıştaki içerik kutusunugöreceli konumlandırıp içindeki paragrafı mutlak konumlandırarak bu işhalledebilriz.
- #adresler {
- width: 700px;
- height: 100px;
- position: relative;
- }
- #adresler .tel {
- position: absolute;
- right: 10px;
- bottom: 10px;
- text-align: right;
- }
- …..
- <div id="adresler">
- <p class="tel">Tel: 0845 838 6163</p>
- </div>
Not:Bu kullanım gelişmiş tarayıcılar için geçerlidir. IE 5.5 veIE 6(Windwos)’da bu sorun çıkarır. Sorunu engellemek için yükseklik ve genişliktanımı yapılmalıdır.
Mutlak konumlandırma sayfa planlamasınınyaparken çok kullanılır. Özellikle göreceli konumlandırılmışbirata element varsa. Tüm siteyi sadece Mutlak Konumlandırma ile planlayabilmemiz mümkündür. Bunun için tüm elementlerin belirli boyutlandırmaişlemleri yapılması şarttır tabi bu elementlerin üst üste binmesiniengellemek için. Çünkü Mutlak Konumlandırılmış bir element doküman akışı dışına çakacaktır ve normal akıştaki element kutularına etkietmeyecektir. Eğer siz Mutlak Konumlandırdığınız elementi genişletmekisterseniz örneğin font boyutunu arttırdığınızda elementi kapasayan kutu normale göre genişlese de etrafındaki elemtlerinakışıdaki yeri değişmeyecektir.
Kaynak:
- www.fatihhayrioglu.com/
- http://www.turkcescript.com/kodlama/css-ile-pozisyonlandirma-ve-z-index.html
