Ana sayfa » Teknoloji » CSS Dersleri » Css Dersleri Bölüm 17 Konumlandırma (positioning)

Css Dersleri Bölüm 17 Konumlandırma (positioning)

tarafından Hasan Yasin Türkyılmaz
0 yorum 17 gösterim

Konumlandırma

Css konumlandırma özellikleri bir elementi konumlandırmanıza yarar. Ayrıca elementlerin biribirine göre konumunu ve içeriklere göre konumunu belirli kriterlere göre konumlandırılmasını sağlar. Elementler  top, bottom, left ve right özellikleri kullanılarak konumlanabilir. Bununla beraber,  position özelliği belirlenmeden bu özellikler işlemez. Ama farklı bir konumlandırma özelliği de sunmaktadırlar. 4 çeşit konumlandırma yöntemi mevcuttur;


Sabit konumlandırma

HTML elementleri varsayılan olarak statiktir yani sabittir konumu. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.


Sabit Konumlama

SAbit konumlamaya sahip bir element tarayıcının göreceli konumuna göre sabitler kendini. Pencereyi kaydırdığınız halde konumu değişmeyecektir:

Örnek

p.pos_fixed { position:fixed; top:30px; right:5px; }

Kendiniz de deneyin »

Not: IE7’de ve IE8’de sadece !DOCTYPE belirlendiği takdirde sabit konumlandırma işe yaramaktadır. Sabit konumlanan elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sabit konumlanan element yokmuş gibi davranırlar. Sabit konumlanan elementler diğerlerinin üzerine çıkarlar.


Göreli Konumlama

Bir göreli konumlu element, normal konumuna göre göreli davranır.

Örneğin

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

Kendiniz de deneyin »

Göreli konumlanmış elementlerin içeriği hareket edebilir ve diğer elementlerin üzeirne çıkabilir, fakat element için ayrılmış konum normal akış içerisinde hala varlığını korur.

Örneğin

h2.pos_top { position:relative; top:-50px; }

Kendiniz de deneyin »

Göreli konumlanmış elementler  genellikle sınırsız konumlamaya sahip olan elementler için bir taşıyıcı görevi üstlenir.


Sınırsız konumlama

Sınırsız konumlanmış bir element kendisini çevreleyen ilk elemente göre göreli olarak konumlar kendini ki statik konumlamadan farklı bir pozisyona sahip olur. <html> etiketini en birincil element kabul eder eğer çevreleyen bir dış elementi yoksa:

Örneğin

h2 { position:absolute; left:100px; top:150px; }

Kendiniz de deneyin »

Sınırsız konumlanmış elementler normal akışın dışında yer alırlar. Döküman ve diğer elementler sınırsız element hiç yokmuş gibi davranırlar. Sınırsız konumlanmış elementler diğer elementlerin üzerine çıkarlar.


Elementlerin üzerine çıkma

Elementler normal akışın üzerinde konumlandığı takdirde diğer elementlerin üzerine çıkarlar.  “z-index” bir elementin yığılmas sıralamasını belirler.  (ki bu elementin önünde arkasında sağında solunda gibidir). Bir element negatif ve pozitif bir sıralamaya sahip olabilir:

Örneğin

img { position:absolute; left:0px; top:0px; z-index:-1; }

Kendiniz de deneyin »

Büyük yığılma sırasına sahip olan element daima düşük sıralamaya sahip olanın önünde ye alır.

Not: İki element de eğer üste çıkıyorsa,bir z-index tanımlaması olmadan, HTML etiketi tanımlaması en son yapılan en üstte olacaktır.


Daha fazla örnek için

Elementin şeklini ayarlar Elementin şeklinin nasıl ayarlanacağını gösterir. Element bu şekle iliştirilmiş ve gösterilmiştir.

Bir elment içindeki taşmayı scrol ile nasıl gösterebilirsiniz Belirlenen alana element sığmayınca overflow elementi ile scrolll özelliğinin kullanımıyla bir bar çıkartarak taşan içeriğin gösterimi.

Tarayıcının otomatik olarak taşmanın üstünden gelmesi için ayarlama Tarayıcının otomatik olarak taşmayı kontrol altına almasını gösterir.

Fare işaretçisini değiştirme Fare işaretçisinin değiştirilmesini gösterir.


Tüm css konumlama özellikleri

“CSS” sütunundaki numaralar desteklenen css versiyonunu göstermektedir (CSS1 veya CSS2).

ÖzellikTanımDeğerCSS
bottomKonumlanmış bir kutunun alt tarafının dışsal boşluğuna göre mesafe belirlemesiauto length % inherit2
clipSınırsız konumlanmış bir elementi iliştirirshape auto inherit2
cursorFare işaretçisini değiştirir, özelleştirirurl auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help2
leftKonumlanmış bir element için sola göre dış kenarla olan ilişkisini mesafe olarak belirlerauto length % inherit2
overflowİçeriği taşan bir elementin kutusunun taşmış kısmı için davranışını belirlerauto hidden scroll visible inherit2
positionBir elementin konumlama tipini belirlerabsolute fixed relative static inherit2
rightKonumlanmış bir elementin sağ kenara göre mesafesini belirlerauto length % inherit2
topKnoumlanmış bir elementin üst kenara göre mesafesini belirlerauto length % inherit2
z-indexBir elementin yığılma sırasını belirlernumber auto inherit2

Alakalı yazılarım

Bu site çerezleri kullanarak deneyiminizi artırmakta. Bilgilerinizi satmamakta, spam amacıyla yapılan reklamlarda da kullanmamakta. Sizlere faydalı içerikler sunarak öğrenmeniz için çabalamakta. Kabul et Devamını oku

%d blogcu bunu beğendi: