Web tasarımı ile ilgili görünüm düzenleme çalışmalarında elementlerin konumlandırılması önemli bir konudur. Web sayfalarında HTML elementlerini CSS özelliklerinden faydalanarak kullanarak kolayca konumlandırabiliriz. Konumlandırılacak HTML elementleri div, p, h1, img, li, a, span v.s gibi elementlerdir.
Bir elementin konumunu belirleyen CSS özellikleri: position, top, left, right, bottom şeklinde özellikler(property) ile belirlenir. Her HTML elementi varsayılan olarak atanmış pozisyon değerleri vardır. Bunlar şu şekilde sıralanabilir:
- position: static
- top: auto
- left: auto
- right: auto
- bottom: auto
Bir elementin konumlandırmasına müdahale etmek istersek bu değerlerde değişiklik yapmalıyız.
CSS konumlandırma özelliklerinin(property) alabilecekleri değerler şu şekildedir.
- position özelliği; static, relative, absolute, fixed , inherit, initial değerlerini alabilir.
- top, left, right ve bottom özelliği; auto veya px, cm gibi sayısal büyüklüklerde değerler alabilir.
HTML elementleri doldurdukları alan seviyesine göre guruplandırılmışlardır. Bu bağlamda iki tür element gurubu vardır. Bunlar:
- Block Level element
- Inline Level Element
Block Level Element
Bu guruptaki elementlerin sayfada kapladıkları alanlar birer kutu gibi düşünülebilir. Aksi belirtilmediği taktirde sayfada alt alta dizilerek sıralanırlar. Örneğin p, h1, …, li, form, div gibi elementler block-level element kategorisindedir.
Şekilde görüldüğü üzere block-level elementler, boyutlarına veya içeriklerine bakılmaksızın kutu gibi düşünülerek alt alta dizilmektedir.
Inline Level Element
Bu guruptaki elementler yeni bir satır açmadan tek bir satırda dizilerek konumlanırlar. Örneğin span, a, img gibi elementler inline-level elementlerdir.
Şekilde görüldüğü üzere a ve span elementleri aynı satırda olacak şekilde konumlandırılmışlardır.
Elementlerle ilgili konum seviyeleri, CSS özelliklerinde aksi belirtilmediği sürece bu şeklide çalışmaktadır. Ancak HTML elementlerinin display CSS özelliğini değiştirerek block-level elementleri inline-level gibi veya inline-level elementleri block-level element gibi göstermek mümkündür.
Örnek şekilde div elementinin display özelliği inline-block olarak ayarlandığında elementlerin tek satıra dizilmiş ve inline-level element özelliği göstermeye başlamıştır. display özelliğini kaldırıldığında ise elementler tekrar alt alta dizilmiştir.
HTML Elementlerin CSS ile Konumlandırması
HTML elementlerin sayfada konumlandırması(positioning) üç farklı şekilde gerçekleştirilmektedir.
- position özelliği static ve relative şeklinde belirlenen elementler normal akışta(normal-flow) konumlandırılır.
- position özelliği absolute şeklinde belirlenen elementler mutlak konumlandırma ile konumlandırılır.
- float konumlandırma.
position: static
Sayfanın elemente verdiği normal akış(normal-flow) uygulanır. Akış kavramını dizilimi olarak düşünebiliriz. Bu özellik uygulanan elementler top, left, right, bottom gibi özellikleri dikkate almazlar.
position: relative
Bu özellikte sayfanın elemente verdiği normal akış(normal-flow) veya sıralama uygulanır. Daha sonra belirlenen top, left, right, bottom özelliklerine göre bulunduğu yerden yani normal konumundan ötelenerek uzaklaştırılır. Yani göreceli olarak konumlandırma yapılmaktadır. Kutu hangi taşıyıcı blok içerisindeyse o bloka göre ötelenir.
position: absolute
Mutlak konumlandırma olarak bilinir ve normal akışın dışına çıkarlar. Kutu konumuna ait top, left, right, bottom özellikleri, absolute özellikli kutunun taşıyıcı bloku olan üst element referans alınarak belirlenir. Eğer absolute bir taşıyıcı blok yoksa, belgenin ya da sayfanın <body> elementi referans alınarak konumlandırılır. Diğer hiç bir element normal akıştaki yerini kaybetmez. Mutlan konumlu elementler kaydırma çubuğu varsa onunla birlikte birlikte hareket ederler.
Örnek Durum-1: En yakında absolute konumlu element yoksa
Örnek Durum-2: En yakında absolute konumlu element varsa (Kırmızı Kutu)
position: fixed
fixed ile konumlandırılmış elementler, sayfanın görüntü alanına yani tarayıcı penceresine göre konumlandırılır. Sayfada kaydırma çubuğu hareket ettirildiğinde kutu hareket etmez ve konumunu korur.
Görünebilirlik Problemi
HTML elementlerin konumlandırılması sırasında üst üste gelen kutular arasında görünebilirlik sorunu ortaya çıkmaktadır. Hangi elementin üstte görüneceğini belirlemek için CSS tarafında z-index özelliği kullanılmaktadır. z-index değerleri pozitif ve negatif tamsayı değerlerini alabilmektedir.
Örnekte normalde altta olan kutu z-index kullanılarak üstte gösterilmiştir.
Kaynaklar:
- http://www.w3schools.com/html/html_blocks.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
- https://www.w3.org/TR/CSS21/visuren.html#choose-position
- https://www.w3.org/TR/CSS21/visuren.html#normal-flow
CSS temelleri açısından oldukça güzel bir yazı olmuş. Özellikle elementlerin block ve inline özelliklerinin detaylı ve güzel açıklanması çok özemli zira bence CSS konusunda yaşanan sorunların büyük kısmı elemenlerin bu özelliklerinin iyi anlaşılamamasından kaynaklanıyor.
CSS konusunda sizin de bahsettiğiniz gibi konumlandırmanın iyi anlaşılması çok önemli. Renklendirme ve boyutlandırma her türlü yapılır. Ama konumlandırma iyi yapılmadığında siteyi yayına almaktan bile vazgeçebiliriz. Çünkü kullanıcılar göz zevkini bozan bir sitede fazla vakit harcamak istemeyeceklerdir.