CSS Konumlandırma - Positioning

CSS konumlandırma özelliği öğelerin konumlandırmasını sağlar. Bir öğenin arkasına bir öğeyi yerleştirebilirsiniz ve bir öğenin içeriğinin fazla büyük olduğu durumlarda ne yapması gerektiğini belirtebilirsiniz.

Üst, alt, sol, ve sağ yönlerinden elemanlara konum verebiliriz. Eğer konumlandırma özelliği kodda ilk olarak yazılmazsa konumlandırma özelliği çalışmayacaktır. Ayrıca farklı konumlandırma yöntemine bağlı olarakta çalışabilirler.

Dört farklı konumlandırma yöntemi vardır.

CSS Statik Konumlandırma - Static Positioning

HTML/XHTML öğeleri varsayılan olarak statik konumlandırılmıştır. Statik olarak ayarlanmış bir eleman her zaman sayfanın normal akışına göre konumlandırılır, yani elemanlar sayfaya sabittir, kaydırma çubuğu ile birlikte aşağı yukarı hareket ederler.

Statik konumlandırma özelliği top, right, bottom ve left özelliklerinden etkilenmez.

CSS Tutturulmuş Konumlandırma - Fixed Positioning

Tutturulmuş konumlandırma özelliği elemanı sayfada sabitler ve kaydırma çubuğu aşağı yukarı yapıldığında eleman sabit kalır.

.tutturulmus_konum {
    position:fixed;
    top:40px;
    right:15px;
}

Not: HTML/XHTML kodumuzda " !DOCTYPE " varsa Internet Explorer bu özelliği destekler.

Tutturulmuş konumlu öğeler normal akıştan çıkarılır. Elemanlar, tutturulmuş konumlu öğenin var olmadığı gibi davranır.

Tutturulmuş konumlu öğeler ile diğer öğeler çakışabilir, o yüzden pozisyonu iyi belirmeniz önerilir.

CSS Göreli Konumlandırma - Relative Positioning

Göreli konumlandırma özelliği, normal konumlamalara göre göreli olarak konumlandırma sağlar. Örneğin, normal konumlandırmayı sıfır olarak düşünürsek ve bir class 'a position:relative ve left:-25px verirsek class 'ımızın bağlı olduğu eleman normal konumlandırılmış elemanlara göre 25 piksel daha solda konumlanacaktır.

.goreli_konum {
    position:relative;
    left:-25px;
}

Relative ile konumlanmış elemanlar taşınabilir ve diğer elemanları etkileyebilir.

CSS Mutlak Konumlandırma - Absolute Positioning

Mutlak konumlandırma özelliği, bizim verdiğimiz yön özelliklerini (top,left,right vs.) tam anlamıyla uygular. Relative konumlandırmada ise verilen yön özelliklerini çevresinde ki elemanlara göre ayarlar.

.mutlak_konum {
    position:absolute;
    left:120px;
    top:180px;
}

CSS z-index ( Örtüşen Elemanlar ) - Overlapping Elements

z-index özelliği ile üst üste gelen iki elemandan hengisinin üstte ya da hangisinin altta kalacağını belirleyebiliriz. Bu özellikte eksi kullanımı vardır. Örneğin, bir elemanın altta kalmasını istiyorsak z-index:-1; kodunu yazabiliriz. Diğer elemanın üstte kalmasını istiyorsakta z-index:1; kodunu yazabiliriz.

p {
    position:absolute;
    right:10px;
    top:5px;
    z-index:1;
}

Unutmamak gerekir ki z-index değeri en yüksek olan eleman en üstte yer alır, z-index değeri en küçük olan eleman ise en altta yer alır.

CSS Overflow Özelliği - Overflow Property

Bir bölümümüz (div 'imiz) var, bu bölüm içinde ki içerik bu bölüme sığmıyor ve içerik dışarı taşıyor. Bu durumda div'in kenarında bir kaydırma çubuğu çıkartabiliriz ya da fazla olan içeriğin görünmesini engelleyebiliriz. Overflow değerlerini görelim.

div {
    width:200px;
    height:200px;
    overflow:scroll;
}

CSS Clip Özelliği - Clip Property

Görselin, bölümden (div'den) daha büyük olması durumunda görseli clip özelliği ile bölüm içine sığacak şekilde kırpabiliriz.

.gorsel_kirpma {
    position:absolute;
    clip:rect(5px,10px,20px,5px);
}

clip:rect 'ten sonra gelen parantez içinde ki sıralama şu şekildedir: ( top, right, bottom, left ). Yani top:5px; right:10px; bottom:20px; left:5px; 'tir.

overflow:visible olduğunda bu özellik çalışmaz.

CSS Cursor Özelliği - Cursor Property

Bir eleman üzerine gelindiğinde imlecin değişmesini istiyorsak cursor özelliğini kullanacağız. Aşağıda ki elemanların üzerine fare ile gelerek imlecin nasıl değiştiğini görebilirsiniz.