CSS - Konumlama (positioning) Özelliği

Tanımlar

Dil-Kuralı Art-Alan Yazı Yazı-tipi Sınır Dışçizgi Kenarlar Dolgu Liste Tablo

Gelişmiş

Boyut Sınıflandırma Konumlama Sözde-Sınıf Sözde-Öğe Galeri Donukluk Ortam-Türü

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Konumlama (positioning) Özelliği

Konumlama özelliği öğenin sayfaya nasıl yerleştirileceğini tanımlar.

Genel

Bu özellik bir öğenin solunu, üstünü, sağını ve altını tanımlamanızı sağlar. Ayrıca öğenin biçimini de belirtebilirsiniz. Bir öğeyi diğerinin arkasına yerleştirmenizi ve bir öğenin içeriğinin çok büyük olduğunda nasıl gösterilen yere yerleştirileceğini belirtmenize de olanak verir.

Destekleyen Tarayıcılar:	IE: Internet Explorer, F: Firefox, N: Netscape.
	W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Özellik	Açıklama	Değerler	IE	F	N	W3C
bottom	öğenin altının üst düzeydeki öğenin ne kadar üstünde ver alacağını belirtir.	auto % uzunluk	5	1	6	2
clip	Öğenin biçimini belirtir. Öğe bu biçime göre kesilip görüntülenir	biçim auto	4	1	6	2
left	Bu öğenin sol kenarının, üst düzey öğenin sol kenarına göre ne kadar solda/sağda olduğunu belirtir.	auto % uzunluk	4	1	4	2
overflow	Bir öğenin içeriğinin belirtilen alana sığmaması durumunda ne yapılacağını tanımlar	visible hidden scroll auto	4	1	6	2
position	Bir öğenin durağan (static) göreceli (relative) mutlak (absolute) ve değişmez (fixed) konumunu belirtir	static relative absolute fixed	4	1	4	2
right	Bu öğenin sağ kenarının, Üst düzey öğenin sağ kenarından ne kadar sağda ya da solda olduğunu belirtme islemidir	auto % uzunluk	5	1	6	2
top	Bu öğenin üst tarafının üst düzey öğenin üst kenarından ne kadar yukarıda ya da aşağıda olduğunu belirtir	auto % uzunluk	4	1	4	2
vertical-align	Bir öğenin düşey ayarını belirtir	baseline sub super top text-top middle bottom text-bottom uzunluk %	4	1	4	1
z-index	Bir öğenin görüntülenme sırasını belirtir	auto sayı	4	1	6	2

Alt (bottom) Özelliği

Bu özellik bir öğenin alt kenarını tanımlamakta kullanılır.

Not: Eğer konum (position) özelliği durağan (static) ise bu özelliğin hiçbir anlamı yoktur.

Örnekte paragrafın alt kenarının
pencerenin alt kenarından 20px
yukarıda olduğu gösterilir.
p
{
position: absolute;
bottom: 20px
}

Örnekte paragrafın alt kenarının
pencerenin alt kenarından 20px
aşağıda olduğu gösterilir.
p
{
position: absolute;
bottom: -20px
}

Olası değerler:
auto: Varsayılan değer. Tarayıcının alt kenarın yerini hesaplaması sağlanır.
%: alt kenarın yüzde oranı olarak pencerenin alt kenarından uzaklığının belirtilmesini sağlar.
uzunluk: Alt kenar konumunu px, cm, vb. değerler olarak pencerenin alt kenarında uzaklığı biçiminde atar. Eksi değerler verilebilir.

Kesme (clip) Özelliği

Bu özellik öğenin biçimini belirtir

img 
{
clip: rect(10px, 5px, 10px, 5px)
}

Olası değerler:
biçim: Öğenin biçimini belirler. Geçerli biçim değerleri: rect (üst, sağ, alt, sol)
auto: Varsayılan değer. Tarayıcı öğenin biçimini ayarlar

Sol (left) Özelliği

Bu örnekte paragrafın sol kenarı
pencerenin sol kenarının 20 px sağındadır:
p
{
position: absolute;
left: 20px
}

Bu örnekte paragrafın sol kenarı
pencerenin sol kenarının 20 px solundadır:
p
{
position: absolute;
left: -20px
}

Olası değerler:
auto: Varsayılan değer. Tarayıcının sol konumu hesaplamasına izin verir.
%: sol konumun pencerenin sol kenarından yüzde olarak uzaklığını bildirir
uzunluk: Sol konumu pencerenin sol kenarına göre px, cm, vb. cinsinden tanımlar. Eksi sayılara izin verilir

Taşma (overflow) Özelliği

p 
{
overflow: scroll
}

Olası değerler:
visible: Varsayılan değer. İçerik kesilmez ve öğenin dışına taşabilir.
hidden: İçerik kesilir ve tarayıcı kesilen kısmın görünmesi için bir kaydırma çubuğu göstermez
scroll: İçerik kesilir ve tarayıcı öğenin kenarında kaydırma çubuğu görüntüler. Bu çubuk diğer içeriği görüntülemeye yarar
auto: Eğer içerik kesiliyorsa tarayıcı kaydırma çubuğunu görüntüler, yoksa görüntülemez.

Konum (position) Özelliği

Konum özelliği bir öğeyi durağan, göreceli, mutlak ve değişmez konumlardan biriyle tanımlanmasında kullanılır

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

Olası değerler:
static: Varsayılan değer. position: static biçimde tanımlanan bir öğe sayfanın normal akışına bağlıdır. Durağan tanımlanan bir öğe için top, bottom, left ve right tanımlar geçersizdir.
relative: position: relative biçiminde tanımlanan bir öğe normal sayfa konumuna göre görecelidir. Bu durumda öğenin tanımında bulunan "left:20" üst öğenin sol konumuna 20 piksel eklenerek hesaplanır.
absolute: position: absolute biçiminde tanımlanan bir öğenin koordinatları bir üst düzetdeki öğeye göre görecelidir Öğenin konumu "left", "top", "right", ve "bottom" özellikleriyle belirlenir
fixed: position: fixed ile tanımlanan bir öğe tarayıcı penceresine göre değişmez koordinatlardadır. Sayfanın kaymasına aldırmadan öğe hep aynı yerde kalır. Öğenin yeri "left", "top", "right", ve "bottom" özellikleriyle belirlenir. IE7 (strict mode) biçiminde çalışır.

Sağ (right) Özellik

Bir öğenin sağ kenarını tanımlar

Not: Eğer konum (position) özelliği için durağan (static) denilmişse, bu özelliğin anlamı yoktur.

Bu örnekte paragrafın sağ kenarı
pencerenin sağ kenarından 20 px soldadır:
p
{
position: absolute;
right: 20px
}

Bu örnekte paragrafın sağ kenarı
pencerenin sağ kenarından 20 px sağdadır:
p
{
position: absolute;
right: -20px
}

Olası değerler:
auto: Varsayılan değer. Tarayıcının sağ konumu belirlemesine izin verir.
%: Pencerenin sağ kenarında yüzde oranında uzaklığı belirtmekte kullanılır.
uzunluk: Sağ konumu px, cm, vb. değere ayarlar. Pencerenin sağ kenarından uzaklık belirtir. Eksi değerler de olabilir.

Üst (top) Özelliği

Bu özellik öğenin üst kenarının yerini belitir.

Not: Eğer konum "position" özelliğinin değeri durağan "static" ise, üst "top" özelliğinin bir anlamı yoktur

Bu örnekte paragrafın üstü
pencerenin üstünden 20 px aşağıdadır:
p
{
position: absolute;
top: 20px
}

Bu örnekte paragrafın üstü
pencerenin üstünden 20 px yukarıdadır:
p
{
position: absolute;
top: -20px
}

Olası değerler:
auto: Varsayılan değer. Tarayıcının üst değeri hesaplamasına izin verilir.
%: Öğenin üst konumunun pencernin üst konumundan yüzde oranında uzaklığını belirtir. Eksi değerler olabilir

Düşey-ayar (vertical-align) Özelliği

The vertical-align property sets the vertical alignment of an element.

img
{ 
vertical-align: bottom
}

Olası değerler:

Değer	Açıklama
baseline	Varsayılan değer. Öğe, üst düzey öğenin tabanına yerleştirilir.
sub	Öğeyi alta yazılır (subscript) gibi ayarlar
super	Öğeyi üste yazılır (superscript) gibi ayarlar
top	Öğenin üst kenarı satırdaki en yüksek öğenin üstüne göre ayarlanır
text-top	Öğenin üstü, üst düzeydeki öğenin yazı-tipi yüksekliğine göre ayarlanır
middle	Üst düzey öğenin tam ortasına göre ayarlanır
bottom	Öğenin altı satırdaki en küçük öğenin boyuna göre ayarlanır
text-bottom	Öğenin altı üst düzey öğenin yazı-tipi boyuna göre ayarlanır
length
%	Öğeyi "line-height" değerinin yüzde oranı olarak ayarlar. Eksi değerlere izin verilir

Z-dizin (z-index) Özelliği

Bir öğenin sıralanış düzenin belirtir. Sıralanış düzen numarası daha büyük olan her zaman diğerinin önünde yer alır.

img
{ 
z-index: -1
}

Olası değerler:
auto: Varsayılan değerler. Üst düzey öğenin sıralanış değerlerine eşittir.
number: Öğenin sıralanışını belirtir.