CSS Positioning Kullanımı

Merhaba Arkadaşlar,
Bu makalede sizlere yeni nesil div ‘li tasarımlarda olmazsa olmazlarımızdan olan ” position ” konusunu anlatacağım. Birbirinden bağımsız çalışma prensibine büründürülmüş kutularda bazı durumlarda üst üste gelmesi gereken bazı durumlarda alt alta gelmesi gereken çalışmalar gözümüze çarpıyor. Bu şekildeki işlemleri ” position ” metodu ile düzenleyerek div ‘lerin çalışma içerisinde hiç bir şekilde yerlerini kaybetmeden düzgün bir görüntü vermesini sağlayabiliriz. Position metodu içerisinde kullanabileceğimiz bileşenler ” absolute , fixed , inherit , relative , static ” şeklinde sıralandırılabilmektedir.

İlk işlem olarak klasik html kodlarımızı vetag ‘leri arasına üç adet div ‘imizi oluşturuyoruz.

    BilgiSayaci.Org - CSS Positioning İşlemleri</pre>
<div class="uyg1"></div>
<div class="uyg2"></div>
<div class="uyg3"></div>
<pre>

Bu işlemi yaptıktan sonra div ‘lerimizin ekranda görünür olabilmesi için stil.css dosyamızı açıyoruz ve şu kodları yazıyoruz.

.uyg1{width: 200px; height: 200px; border: 1px solid #000000; background-color: #0030ff;}
.uyg2{width: 200px; height: 200px; border: 1px solid #000000; background-color: #f0ff00;}
.uyg3{width: 200px; height: 200px; border: 1px solid #000000; background-color: #ff0000;}

Bu işlemleri yaptıktan sonra index.html sayfasını çalıştırdığımızda alt alta sıralanmış 3 adet div göreceğiz. Şimdi sıra geldi position elementlerini kullanarak div ‘lerimizi şekillendirmeye..

Absolute
İlk olarak kullanacağımız bileşen absolute olacaktır. Her üç div ‘imize de float: left işlemini uyguluyoruz ve yatay bir görünüm sağlıyoruz. Daha sonra üst üste gelecek divlerimizi yeniden boyutlandırarak daha iyi anlayabilmemize olanak sağlıyoruz. Bunun için uyg1 200*200 , uyg2 150*150 ve uyg3 100*100 boyutlarını alıyorlar. Ardından uyg3 div ‘imize ” position: absolute ” özelliğini veriyoruz. Bakalım nasıl bir görüntü ortaya çıkıyor.

.uyg1{width: 200px; height: 200px; border: 1px solid #000000; background-color: #0030ff; float: left}
.uyg2{width: 150px; height: 150px; border: 1px solid #000000; background-color: #f0ff00; float: left}
.uyg3{width: 100px; height: 100px; border: 1px solid #000000; background-color: #ff0000; float: left; position: absolute;}

Bu işlemi yaptıktan sonra sayfayı çalıştırdığımızda görüntüde bir değişiklik olacaktır. uyg3 ismini verdiğimiz div gidip uyg1 div ‘imizin üzerine çıkacaktır. Dikkat ettiyseniz çalışmamızda sadece uyg3 isimli div ‘e position özelliği verdik ve diğer ikisine dokunmadık. CSS mantığında bir div’ e position:absolute özelliği verdiğimizde diğer iki div kendini position:relative olarak gösterir. Bu demek oluyor ki uyg3 div ‘i en üstteki kutudur ve soldan onu iten bir baskı olmadığı için top ve left değerlerini 0 olarak görerek en baş kısma yaslanır.

Relative
En çok kullanılan position bileşenlerinde en baş sırayı absolute ile paylaşan bileşendir. Göreceli konumlandırma olarak ta aktarabileceğimiz bu yöntemde örneğin ” uyg3 ” adlı div ‘imize daha önce verdiğimiz absolute ‘nin yerine relative özelliğini verdiğimizde alacağımız görüntü position özelliğini kullanmadan float vererek alacağımız görüntü ile yani yatay sıralanmış kutu görüntüsü ile aynı olur. Relative ‘in ne işe yaradığını tam anlamak için bu özelliği ” uyg3 ” adlı div ‘e uyguladıktan sonra top ve left özelliklerini verdiğimizde ” uyg3 ” div ‘imizin hemen bitişiğinde bulunan ” uyg2 ” adlı div ‘i baz alarak soldan ve yukarıdan boşluk bıraktığını göreceğiz.
Kısacası absolute’ den farklı olarak solunda ki sabitlenmiş görüntü veren div ‘i baz alarak hareket etmektedir.

.uyg1{width: 200px; height: 200px; border: 1px solid #000000; background-color: #0030ff; float: left;}
.uyg2{width: 150px; height: 150px; border: 1px solid #000000; background-color: #f0ff00; float: left;}
.uyg3{width: 100px; height: 100px; border: 1px solid #000000; background-color: #ff0000; float: left; position: relative; top: 50px; left: 50px;}

Fixed
Bu yöntem absolute yöntemine de benzeyen bir yöntemdir. Web sayfalarında gördüğümüz sabitlenmiş ve sayfa ile kayan kutuların büyük bir çoğunluğu bu yöntemi kullanıyorlar. İşlemlerimizi yaptıktan sonra göreceğiz ki fixed işlemini uyguladığımız div ‘imiz sayfayı aşşağı yukarı hareket ettirdiğimizde sabit kalırken bu özelliği uygulamadığımız div ‘lerimiz sayfayı aşşağı hareket ettirdiğimizde onlarda sayfa ile birlikte hareket ederek kaybolucaklardır.
Uygulamamıza geçmeden önce bu işlemi tam anlayabilmek için index.html div ‘imizde eminimki çok seveceğiniz küçük bir değişiklik yapmamız gerekiyor 🙂

    
    BilgiSayaci.Org - CSS Positioning İşlemleri


</pre>
<div class="uyg1"></div>
<div class="uyg2"></div>
<div class="uyg3"></div>
<pre>
BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

BilgiSayaci.Org

Bunu yapmazsak olmazdı 🙂 . Çünkü sayfayı hareket ettirmeliyiz ve işlemin görünümünün nasıl olduğunu görmeliyiz. Her neyse şimdi stil.css dosyamızı düzenleyelim ve daha sonra ekran çıkmızı görelim.

.uyg1{width: 200px; height: 200px; border: 1px solid #000000; background-color: #0030ff; float: left; position: absolute}
.uyg2{width: 150px; height: 150px; border: 1px solid #000000; background-color: #f0ff00; float: left;position: absolute;}
.uyg3{width: 100px; height: 100px; border: 1px solid #000000; background-color: #ff0000; float: left; position: fixed;}

İşlemlerimizi tamamladıysak açıkladığım düzenin gerçekleşmesi gerekmektedir. En son yaptığımız fixed sistemi ile düzenlenmiş dosyayı aşşağıda belirtilen yoldan indirebilirsiniz.
Bir sonraki makalede görüşmek dileğiyle İyi Çalışmalar 🙂

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 7 No ‘lu Maddeden İndirebilirsiniz..