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.

• visible : Bölüm içinde ki içerik bölüm içine sığmazsa dışarı taşar. Varsayılan.
• hidden : Sığmayan içeriği yok sayar.
• scroll : Sığmayan içerik için kaydırma çubuğu çıkarır.
• auto : İçerik sığmamaya başladığında otomatik olarak kaydırma çubuğu çıkarır.

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.

• crosshair : İmlecin artı işareti şeklinde gözükmesini sağlar.
• auto : İmlecin metinde dikey çizgi, boş alanda normal ok şeklinde gözükmesini sağlar.
• default : İmlecin hem metinde hem de boş alanda normal ok şeklinde gözükmesini sağlar.
• pointer : İmlecin linkte olduğu gibi el şeklinde gözükmesini sağlar.
• move : İmlecin taşıma işareti şeklinde gözükmesini sağlar.
• ne-resize : İmlecin sağa yatık normal ok şeklinde gözükmesini sağlar.
• nw-resize : İmlecin sola yatık normal ok şeklinde gözükmesini sağlar.
• se-resize : İmlecin yukardan aşağı doğru ve sağa yatık normal ok şeklinde gözükmesini sağlar.
• sw-resize : İmlecin yukardan aşağı doğru ve sola yatık normal ok şeklinde gözükmesini sağlar.
• n-resize : İmlecin aşağıdan yukarıya doğru ince ok şeklinde gözükmesini sağlar.
• s-resize : İmlecin yukardan aşağı doğru ince ok şeklinde gözükmesini sağlar.
• w-resize : İmlecin sola doğru ince ok şeklinde gözükmesini sağlar.
• e-resize : İmlecin sağa doğru ince ok şeklinde gözükmesini sağlar.
• text : İmlecin hem metinde hem de boş alanda metinde olduğu gibi gözükmesini sağlar.
• wait : İmlecin meşgul animasyonuna dönüşmesini sağlar.
• help : İmlecin soru işaretine dönüşmesini sağlar
• url : Yeni imleç eklememizi sağlar. cursor:url(yeni.cur) olarak kullanımı vardır. Sadece .cur dosyalarını destekler.