Top

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

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

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).

Özellik Tanım Değer CSS
bottom Konumlanmış bir kutunun alt tarafının dışsal boşluğuna göre mesafe belirlemesi auto length % inherit 2
clip Sınırsız konumlanmış bir elementi iliştirir shape auto inherit 2
cursor Fare işaretçisini değiştirir, özelleştirir url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 2
left Konumlanmış bir element için sola göre dış kenarla olan ilişkisini mesafe olarak belirler auto length % inherit 2
overflow İçeriği taşan bir elementin kutusunun taşmış kısmı için davranışını belirler auto hidden scroll visible inherit 2
position Bir elementin konumlama tipini belirler absolute fixed relative static inherit 2
right Konumlanmış bir elementin sağ kenara göre mesafesini belirler auto length % inherit 2
top Knoumlanmış bir elementin üst kenara göre mesafesini belirler auto length % inherit 2
z-index Bir elementin yığılma sırasını belirler number auto inherit 2

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Css Dersleri Bölüm 16 Gösterim ve Görünürlük başlıklı makalemizde collapse, css dersleri ve display hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious