Css

CSS İleri Düzey – CSS Konumlandırma (Positioning)

CSS İleri Düzey – CSS Konumlandırma (Positioning)

CSS Konumlandırma Yöntemleri

Öğeleri web sayfalarına uygun şekilde konumlandırmak, iyi bir düzen tasarımı için bir gerekliliktir. CSS’de elemanları konumlandırmak için kullanabileceğiniz birkaç yöntem vardır. Aşağıdaki bölüm, bu konumlandırma yöntemlerini birer birer tanımlayacağız.

  • static – Hiçbir özellik belirtilmediyse
  • fixed – Sabit, tarayıcıya göre hareket etmeyen element
  • relative – Normal olması gereken pozisyona göre konum belirlemek
  • absolute – Koordinat belirleyerek sayfada bir yere yerleştirmek

Static Positioning : CSS Statik Konumlandırma

Statik konumlu bir eleman daima sayfanın normal akışına göre konumlandırılır. HTML öğeleri varsayılan olarak statik olarak konumlandırılmıştır. Statik yerleştirilmiş elemanlar etkilenmez topbottomleftright, ve z-index özellikleri.

Fixed Positioning : CSS Tutturulmuş Konumlandırma

Sabit konumlandırma, mutlak konumlandırmanın alt kategorisidir.

Tek fark, sabit konumlandırılmış bir elemanın tarayıcının görünüm alanına göre sabitlenmesidir ve kaydırıldığında hareket etmemesidir.

Relative Positioning : CSS Göreceli Konumlandırma

Göreceli olarak konumlandırılmış bir eleman normal konumuna göre konumlandırılmıştır.

Göreceli konumlandırma şemasında elemanın kutusu konumu normal akışa göre hesaplanır. Daha sonra kutu özelliklerine göre, bu normal konumundan kaydırılır – topya da bottomve / veya leftya da right.

Absolute Positioning : CSS Mutlak Konumlandırma

Kesinlikle konumlandırılmış bir öğe, statik dışında bir konuma sahip olan ilk ana öğeye göre konumlandırılır. Böyle bir öğe bulunmazsa, tarayıcı penceresinin ‘sol üst’ köşesine göre bir sayfada konumlandırılır. Kutunun uzaklıklar ayrıca özelliklerden birini veya daha fazlasını kullanarak belirtilebilir toprightbottom, ve left.

Kesinlikle konumlandırılmış elemanlar tamamen normal akıştan çıkarılır ve bu nedenle kardeş elemanlar yerleştirilirken yer kaplamaz. Ancak, z-index özellik değerine bağlı olarak diğer öğelerle üst üste gelebilir . Ayrıca, kesinlikle konumlandırılmış bir öğenin kenar boşlukları olabilir ve diğer kenar boşluklarıyla daraltılmazlar.

Not: HTML/XHTML kodumuzda “!DOCTYPE” varsa Internet Explorer (IE7 ve IE8)bu özelliği destekler.

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap