CSS Pozisyon Belirleme (position)

CSS ile HTML elementlerinin sayfaya veya diğer elementlere göre konumunu belirleyebiliriz. Örneğin sağa sola yaslayabiliriz. Veya diğer nesnelerle olan pozisyonu belirleyebiliriz. Bununla birlikte diğer HTML elementlerine göre büyüklüklerini göreceli ya da kıyaslamalı olarak belirleyebiliriz.

Tüm HTML nesneler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Fakat biz bu elementlerin CSS ile position ‘unu tanımlamamışsak bu özellikler herhangi bir işe yaramayacaktır. Bununla birlikle HTML nesnelerinin pozisyonlarını belirlediğimiz 4 özellik daha mevcuttur. Bunlar:

• static – varsayılan pozisyonu, bütün elementler varsayılan olarak static pozisyonu vardır.
• fixed – Sabit, tarayıcıda kesin ve hareket etmeyen konumunu belirlemek.
• relative – bir başka nesneye olan göreceli pozisyonuna göre konum belirlemek
• absolute – Sayfa üzerindeki x (yatay) ve y (dikey) kesin posizyonunu belirlemek

static: Varsayılan pozisyonunda bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri varsayılan pozisyonlarında kalacaklardır. Bu kullanımda HTML nesnelerin alt, üst, sağ ve sol özellikleri bulunmaz.

fixed: Sabit pozisyon

Bir HTML nesnesini tarayıcı ekranına sabitlemek için kullanırız. Sayfayı kaydırsanız bile o element orada sabit duracaktır.

   img.fixed
   {
      position: fixed;

      top: 20px;
      right: 15px;
   }

Yukarıdaki css koduna göre “fixed” özelliğine sahip resmimiz sağdan 15 piksel üstten de 20 piksel olacak şekilde sayfaya sabit bir şekilde tutturulduğunu göreceksiniz.

Bunun gibi elementler bazen bir diğerinin üzerine geçebilir ve diğerini kapatabilir. Bunların hiyerarşik sıralamasını belirlemek için z-index kullanabiliriz.

relative: Sahip olduğu pozisyona göre konumlama

Bir HTML elementini o anki sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin o an olması gereken pozisyon tarayıcı tarafından hesaplanır. Ancak biz elementi sağ, sol, alt ve üst tarafa doğru relative/göreceli olarak hareket ettirebiliriz.

   p
   {
      position: relative;

      right: -20px;
   }

Yukarıdaki örnek P elementini bulunduğu konumdan 20 piksel sola kaydırır. Böylece diğer bir elementin üzerine getirebiliriz.

absolute: Sayfa Üzerinde Kesin Bir Konum Belirleme

HTML elementlerini sayfada istediğimiz bir konuma yerleştirmek istediğimizde absolute komutunu kullanırız. Bu komut fixed gibi nesneyi belli bir konuma kilitlemez. Ancak sayfa içerisindeki kesin konumunu belirler. Aşağıdaki örnekte UL nesnesini sayfanın üstten 20px aşağısına 30px de soluna yerleştirdik. Elbette sayfaya göre belirlendiği için sayfa hareket ettikçe nesne de hareket edecektir.

   ul
   {
      position: absolute;

      left: 30px;
      top: 20px;
   }

Bu pozisyon belirlemede reletivede olduğu gibi element sayfada belli bir yeri işgal etmez. Bunun yerine belirlediğimiz konum üzerinde asılı durur. Bazen “Absolute” özellikli elementler başka bir elementin üzerine geçebilir ve onları kapayabilir.

z-index: Elementlerin katman sırasını belirler

Bazı çizim veya resim programlarından bildiğimiz üzere nesnelerin katman sırasını belirleriz. İşte böyle CSS’de de z-index özelliği ile bir HTML elementinin diğerinin üzerinde veya altında görünmesini sağlayabiliriz.

   p
   {
      position: absolute;

      left: 0px;
      top: 0px;

      z-index: 1;
   }

Yukarıda -1 değeri ile belirttiğimiz paragraf diğer tüm elementlerin altında görünecektir. Çünkü varsayılan olarak HTML elementlerinin z-index değerleri 0 olarak atanır. Buna karşın bu element -1 olduğu için alt katman olarak belirlenir ve diğer nesnelerin altında gözükür.

Negatif değerler aynı sayılarda olduğu gibi değerlendirilir. Örneğin z-index değeri -3 olan bir nesne -2 olan nesnenin altında yer alacaktır.

CSS ile Kaydırma (float)

HTML elementlerini sağa ve sola doğru kaydırmamız için kullandığımız  CSS kodudur. Bunu Office Programlarındaki sağa sola yaslama gibi düşünebilirsiniz.

Elementler Nasıl Kaydırılır?

Elementler, yatay konumlarına göre sağa ve sola doğru kaydırılabiliriz. Bununla birlikte aşağı veya yukarı doğru kaydırma yapamayız.

Kaydırılan element, sağ veya soldaki elementin ya sağından ya da solundan başlayacaktır. Yani burda kaydırdığımız nesne, kendisinden önce kaydırılan nesneden sonra gelir. Dolayısıyla önceden kaydırılmış nesnede herhangi bir değişiklik olmaz.

Örneğin menü yaparken kullandığımız bir li HTML nesnesini için float: left; özelliği ile yaslamaya çalışırsak her bir li nesnesi bir öncekinin sağına yerleşecek şekilde hepsi solda yer alacaktır.

Elementleri Yan Yana Sıralamak

Resim galerilerinde çok sık kullanılan bir yöntemi biliyorsunuz. Büyük resimleri açmak için tıkladığımız küçük resimler sayfada yan yana sıralanırlar. Bunlar birbirine eşit olmalı ki kaydırıldığında birbiriyle uyumlu olsunlar. Örneğin küçük görüntümüz:

   .thumbnail
   {
      float: left;
      width: 100px;
      height: 100px;
      padding: 10px;
      border 1px solid #dedede;
      margin: 15px;
   }

Yukarıdaki örnekte thumbnail klasına sahip resimleri yanyana ip gibi dizdik. Burada nesneler bir öncekinin sağına yerleştirildi. Ayrıca sığmayanlar aşağıya kaydırılacaktır.

Kaydırma işlemini sonlandırma

clear: both; komutu artık kaydırma işleminin bittiğini söyler, böylece yanına başka bir element gelemeyecektir.

   .text_line
   {
      clear: both;
   }

CSS Hizalama (align)

HTML Elementlerin CSS ile Hizalanması

Kutu özelliğine sahip olan nesneleri sağa sola ya da ortaya hizalayabiliriz. Bunun için text-align kodunu kullanırız. Bu yazımızda daha farklı yöntemlerle hizalama işlemi yapacağız.

Margin Kullanarak Nesneleri Ortalama

Daha önce söylendiği gibi kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı tam da ortalanacaktır. Bununla birlikte genişliğimizi yüzde 100 yapmamalıyız.  Yani width değeri hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:

   .textcenter
   {
      margin-left:auto;
      margin-right:auto;

      width:90%;

      background-color:#dedede;
   }

Yukarıdaki örnekte otomatik olarak 5% sola 5% de sağa boşluk gelecektir. Aynı zamanda genişlik de buna göre ayarlanacaktır.

Position CSS Kodu ile Sağa ve Sola Yaslamak

Position: absolute; kodu kullanarak da ölçüsünü belirlediğimiz genişlikte bir kutunun sağa veya sola yaslanmasını sağlayabiliriz. Örnek vermek gerekirse 400 piksellik bir kutuyu sağa yaslamak için:

   .textcenter
   {
      position: absolute;

      right; 0px;

      width: 400px;

      background-color:#b0e0e6;
   }

Sağdan 0 piksel verdik ki nesne tam olarak da sağda bulunsun. Bunun için right: 0px; yaptık.

Float ile Sağa ve Sola Yaslamak

Float HTML nesnelerini sağa veya sola kaydırarak listelememizi yardımcı olur. Kaydırma özelliğini bir nevi hizalamak için kullanırız:

   .right
   {
      float: right;

      width: 300px;

      background-color:#b0e0e6;
   }

Sayfamızda 300 piksellik bir kutu sağa yaslanmış durumdadır.

Bütün bu CSS komutlarını düzgün hizalı menü oluşturma veya resim galerilerinde küçük resimleri hizalama gibi daha bir çok yerde kullanabiliriz. Sayfanız içerisinde hangisinin daha kullanışlı olacağı tasarımınıza göre şekillenecektir. Ayrıca tasarımlarınızda karşılaştığınız problemler için yorum yazabilirsiniz. İçeriğin eksik veya hatalı olduğunu düşünüyorsanız bunu söylemekten çekinmeyin. Yorumlarınız mutlaka yayınlanacaktır.