Elementleri Konumlandırma
Elementlerin web sayfasındaki konunları normal koşullarda bulundukları yerin ölçülerine bağlıdır. Yeni bir veya birden fazla element bir araya geldiğinde meydana getirdikleri görüntü durağan yapıdadır. Bu elementlerde normal koşullarda soldan, sağdan, üsten ya da altan uzaklık değeri verilerek konumları değiştirilmektedir.
POSITION KULLANIMI
position özelliği elementlerin belgenin sol üst keşesinden başlayarak belli bir hizaya göre yer almalarını sağlar. Yani position nesneye nasıl bir pozisyon verileceğini belirler. Birden fazla pozisyon belirleme seçeneği mevcuttur. Bunlar kısaca aşağıda özetlenmiştir.
1-Durağan(static)
2-Göreceli(relative)
3-Mutlak (absolite)
4-Sabit (fixed)
Durağan Konumlandırma(static)
Static değer bir nesneye pozisyon verilmeyeceğini tanımlar. Yani belge ağacı içindeki yeri değişmez. Bir nesneye hiçbir pozisyon değeri atanmamışsa nesne varsayılan değer olarak static değer almış olur.
Göreceli Konumlandırma (Relative)
Göreceli konumlandırmanın özelliği, bir çerçevenin, bloğun ya da katmanın bulunduğu yere göre olan konumdur. Özellikler bir içeriğin gizli kalan tarafı fare ile görütülenmek istendiğinde ya da menülerde ve mouseover uygulamalarında büyük kolaylık sağlar. relative özelliği nesnelerin bulunduğu yeri tarif eder. Yani bu özelliğin uygulandığı nesnelerde belge içinde nerede duruyorlarsa yine orada dururlar. Nesne kendi doğal oratanımda kalır. Katmanlar hangi sıra ile belge içinde bulunuyorlarsa yine aynı sıra, konumları korunur.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> .anadiv{ color:white; width:50%; height:40em; background: rgba(0,204,0,0.5); } .kutu1{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } .kutu2{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position:relative; left:150px; top: 200px; } .kutu3{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } </style> </head> <body> <div class="anadiv"> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> </div> </body> </html> /* ÖRN 2*/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-sınıfları</title> <style> .anadiv{ color:white; width:50%; height:40em; background: rgba(0,204,0,0.5); margin:0 auto; } .kutu1{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } .kutu2{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position:relative; left:-150px; top: 0px; } .kutu3{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } </style> </head> <body> <div class="anadiv"> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> </div> </body> </html> |
Mutlak Konumlandırma
Kutu modelinde elementlerin serbest ve bağımsız olarak konumlandırmasını sağlar. Mutlak konumlandırma kutu modelinde sol üst köşeden referans olacaktır. Sol üst köşenin koordinat değeri 0,0 dır. Bir konuma göre X ve Y koordinatlarnın değeri verilerek mutlak konumlandırma yapılabilir. Absolute Değeri ile tanımlanmış blok düzeyi elementler sayfada bir katman olarak yer alırlar. Bu nedenle boşluk bırakcak bir yerleri olmaz. Bir katman olarak yüzer durumda yer aldıklarından sağında, solunda, altında ya da üstünden iterek yer açmazlar. Katman sırası z-index ile belirlenerek öne ya da geri pozisyona itilebilirler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Konumlandırma</title> <!-- Çağlar BOSTANCI --> <style> .anadiv{ color:white; width:50%; height:40em; background: rgba(0,204,0,0.5); margin:0 auto; } .kutu1{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } .kutu2{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position: absolute; left:650px; top:100px; } .kutu3{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } </style> </head> <body> <div class="anadiv"> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> </div> </body> </html> |
Absolute ve z-index
Sadece Absolute ve fixed ile konumlandırılmış nesnelerin z-index değeri bulunur. Diğer konumlandırmaların z-index değeri yoktur. z-index değeri katmanların istiflenme (bir bileri üzerine durma sırası) belirler ve nesnelerin derinlik boyutudur. En büyük sayı değerini alan element her zaman en üstte konumlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Konumlandırma</title> <!-- Çağlar BOSTANCI --> <style> .anadiv{ color:white; width:50%; height:40em; background: rgba(0,204,0,0.5); margin:0 auto; position:relative; } .kutu1{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position: absolute; left:260px; top:130px; z-index:3; } .kutu2{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position: absolute; left:250px; top:100px; z-index:2; } .kutu3{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position: absolute; left:240px; top:70px; z-index:1; } </style> </head> <body> <div class="anadiv"> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> </div> </body> </html> |
Sabit Konumlandırma
fixed özelliği nesnelerin belge içinde hangi konumda tanımlanmış iseler o yerde yüzer durumda sabit kalmalarını sağlar. Yani belgenin scroll alanı hareket ettiğinde o bulunduğu yerde yüzer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Konumlandırma</title> <!-- Çağlar BOSTANCI --> <style> .anadiv{ color:white; width:50%; height:100em; background: rgba(0,204,0,0.5); margin:0 auto; } .kutu1{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } .kutu2{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; } .kutu3{ width:150px; height:5em; background:rgba(51,51,0,1); border:1px solid white; position:fixed; } </style> </head> <body> <div class="anadiv"> <div class="kutu1">KUTU 1</div> <div class="kutu2">KUTU 2</div> <div class="kutu3">KUTU 3</div> </div> </body> </html> |