position
Bu özellik ile elemanların konumlandırmasında kullanılacak referans belirlenir. Varsayılan değer static değeridir ve konumlandırmanın normal sayfa akışına göre yapılacağını belirtir. fixed değeri kullanıldığında eleman tarayıcı penceresine göre sabit bir noktaya konumlandırılır ve pencerede kaydırma yapılsa dahi eleman pencerenin aynı yerinde kalır. fixed değeri ile konumlandırılan elemanlar sayfanın normal akışından silinir ve diğer elemanlar sayfaya o eleman yokmuş gibi yerleştirilir. relative değeri girilirse eleman sayfa akışına göre olması gereken yere göre izafi olarak konumlandırılır. Böyle konumlandırılan elemanlar sayfa akışında normalde olması gereken yerdeymiş gibi değerlendirilir. absolute değeri ile de eleman sayfanın belirtilen bir yerine yerleştirilir. Sayfa akışında böyle konumlandırılan elemanlar da yok sayılır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
left, right, bottom ve top
position özelliğinin karşısında static değeri olan elemanlar sayfa akışına göre konumlandırılır. Diğer değerlerle konumlandırılan elemanlar ise belli bir referansa göre konumlandırılır. Konumlandırma işlemi bu özelliklerle yapılır. left özelliği sol taraftaki, right özelliği sağ taraftaki, top özelliği üstteki ve bottom özelliği alttaki mesafeyi belirtir. Bu özelliklerin varsayılan değeri mesafeyi otomatik olarak belirlenmesini sağlayan auto değeridir. Belli bir mesafe belirtilmek istenirse uzunluk değeri girilmelidir. Bu özellikler ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: fixed;
left: 300px;
top: 10px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek">Fixed Paragraf</p>
<div><br><br><br></div>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
</body>
</html>
Yukarıdaki örnekte fixed değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken fixed değeri ile konumlanmış paragraf tarayıcı penceresinde soldan 300px, üstten 10px kadarlık mesafeye konumlandırılacaktır. Kaydırma çubuklarıyla kaydırma yapıldığında dahi bu paragraf tarayıcı penceresinde aynı konumda kalacaktır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: relative;
left: 20px;
top: 20px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Örnek Paragraf</p><br>
<p class="ornek">Relative Paragraf</p><br>
<p>Örnek Paragraf</p><br>
<p>Örnek Paragraf</p><br>
</body>
</html>
Yukarıdaki örnekte de relative değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken relative değeri ile konumlanmış paragraf normalde olması gereken yere göre soldan ve üstten 20px kadarlık mesafede konumlandırılacaktır..
<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: absolute;
left: 200px;
top: 200px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Örnek Paragraf</p>
<p class="ornek">Absolute Paragraf</p>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
</body>
</html>
Yukarıdaki örnekte ise absolute değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken absolute değeri ile konumlanmış paragraf sayfada soldan ve üstten 200px kadarlık mesafeye konumlandırılacaktır. Kaydırma çubuklarıyla kaydırma yapıldığında bu eleman yine sayfadaki yerinde kalacaktır. Bunu denemek için pencereyi küçültüp kaydırma yapabilirsiniz.
clip
Bu özellik ile absolute değeri ile konumlandırılmış elemanlarda kırpma yapılabilir. Kırpma işlemi için bir dikdörtgen tanımlanır ve dikdörtgenin dışında kalan kısım görüntülenmez. Bu özellik şu kalıpla kullanılır:
clip: rect(y1,x1,y2,x2);
Bu kalıpta y1,x1 tanımlanan dikdörtgenin sağ üst köşesini y2,x2 tanımlanan dikdörtgenin sol alt köşesini belirtir. Dikdörtgenin referans aldığı nokta uygulandığı elemanın sol üst köşesidir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
h1{
position: absolute;
left: 200px;
top: 200px;
clip: rect(0px,100px,100px,0px);
color: blue;
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Örnek Paragraf</h1>
</body>
</html>
Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
z-index
Bu özellikle static değeri dışındaki bir değerle konumlandırılmış elemanlara sıra verilebilir. Sıra tam sayı şeklinde olmalıdır. Negatif değerler de girilebilir. İki eleman çakıştığında sırası büyük olan diğerinin önünde görüntülenir. Alttaki örnekte sol tarafta fixed değeriyle konumlandırılan elemanın sırası, sağ tarafta ise absolute değeriyle konumlandırılan elemanın sırası diğerinden daha büyüktür. Kaydırma yapılarak elemanlar üst üste bindirildiğinde bu özelliğin çalışması görülebilir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.fixedleft{
position: fixed;
left: 10px;
top: 10px;
background-color:pink;
z-index:1;
}
p.fixedright{
position: fixed;
right: 10px;
top: 10px;
background-color:pink;
z-index:-2
}
p.absoluteleft{
position: absolute;
left: 10px;
top: 200px;
background-color:lightblue;
z-index=0;
}
p.absoluteright{
position: absolute;
right: 10px;
top: 200px;
background-color:lightblue;
z-index:-1;
}
p{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p class="fixedleft">Örnek Paragraf</p>
<p class="fixedright">Örnek Paragraf</p>
<p class="absoluteleft">Örnek Paragraf</p>
<p class="absoluteright">Örnek Paragraf</p>
<div><br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br></div>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
<p>Örnek Paragraf</p>
</body>
</html>
Sayfa Bölme <<<<< CSS3 >>>>> Yaslama