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.