Pozisyon ve Katman (Layer) Mantığı
CSS’de HTML elementlerinin pozisyonları (position) konusuna hakim olmak tasarımımızın güçlü ve estetik olmasını sağlayacak önemli bir unsurdur. CSS’de elementlerin pozisyonlarını anlatmadan önce layer mantığını kavramış olmamız gerekir. Layer (katman) mantığından biraz bahsetmek gerekirse, HTML sayfasını öncelikle 2 boyutlu olarak düşünürsek bütün HTML blok seviyesindeki elementler sayfaya yerleştirildiğinde farklı farklı noktalarda konumlandırılmış olacaklar ve biz boyutlarına göre girintili ve çıkıntılı olsa da bütün element içeriklerini görüyor olabilecektir. Bu durumda tasarımımız çok düzgün olmamakla birlikte, içeriklerin değişmesi, eksilmesi veya artması durumunda tasarımımızdaki blok elementlerde kaymalar meydana gelecekti ki tasarımımız her seferinde revize edilmesi gerekecekti.
Şimdi HTML sayfasını 3 boyutlu olarak hayal edin, bütün katmanları üst üste koyabildiğiniz, istediğiniz derinlikte ve konumda elementlerini yerleştirebildiğiniz, hatta içeriklerin değişmesi durumunda dahi konumlarını muhafaza edecek yapıları kullandığınızı, tasarımınız şimdi güzel bir hal alacaktır.
Layer Mantığı ve Katmanlar
Konumlandırma (Position)
CSS’de 5 farklı pozisyon ve konumlandırma değerlerini göreceğiz;
static: Olağan konumlandırma
relative:Göreceli (zahiri) konumlandırma
absolute: Mutlak konumlandırma
fixed: Sabitlenmiş konumlandırma
sticky: Yapışık konumlandırma
Static Konumlandırma
Element eklendiğinde sayfanın akışına göre konumlanan durumdur. Her bir blok seviyesi element eklendiğinde konumu varsayılan olarak static’tir ve kendinden önceki elementin durumuna göre kendi konumunu belirler. Aşağıda postion değerleri yazılmış olmasına rağmen yazılmamış olsaydı yine sonuç aynı olacaktı.
<div class="red"> Birinci blok </div> <div class="purple"> İkinci Blok </div> <div class="gray"> Üçüncü blok </div>
div{
width: 200px;
height: 200px;
color:white;
}
.red{
position:static;
background-color:red;
}
.purple{
position:static;
background-color:purple;
}
.gray{
position:static;
background-color:gray;
}
Yukarıdaki örneğin çıktısını görmek için tıklayınız..
Relative Position ( Göreceli Konumlandırma )
position relative göreceli konumlandırma
Eklenen her elementin bir önceki elementin ilk pozisyonuna göre konumlandığı durumdur. Relative özelliği kelime anlamına bakıldığında da, zahiri veya başka bir deyimle göreceli anlamına gelir. Buradaki göreceli durum bir önce kullanılan elementin konumuna göre kendini konumlandırmasından gelmektedir. Relative özelliği kullanılması ile elementin konumunu top, left, bottom, right özellikleri ile gerçekleştirebilmeye olanak tanır. Margin ile arasındaki fark elementin boyutuna müdahale etmemesi bunu sabit tutmasıdır. Örnek olarak margin-left ile verilen bir değer soldan uzaklaşmasını sağlarken sağ tarafta sayfanın sınırları ile kendini küçültecektir. Fakat left değeri kullanılarak verilen bir değerde elementin genişliğinde herhangi bir değişiklik olmadan girilen değer kadar sayfanın dışına çıkacaktır. Bu anlatılan örneği görmek için tıklayınız.
Daha açıklayıcı olması açısından static ve relative özelliklerini aynı örnekte karşılaştırmalı olarak görmemiz daha iyi olacaktır. Örneği incelemek için tıklayınız.
See the Pen relative position by Emre (@esencan) on CodePen.
Örneği en anlaşılır şekilde görebilmek için (çözünürlük farklılıklarından dolayı) codepen sayfasında bakınız veya zoon değerlerini değiştiriniz. (0,5x, 0.25x gibi)
Örnek Açıklaması
Yukarıdaki örneği incelediğimizde yüksekliği ve genişliği 100px, yazı rengi beyaz ve birbiri üzerine yaslanacak şekilde float değeri left olarak verilmiştir. Her bir <div> etiketine de posizyon durumuna ve rengine göre class isimleri (class=”red_relative” veya class=”purple_static”) tanımlanmıştır.
Yatay olarak ilk sırada bulunan 3 farklı renge sahip tüm <div> etiketlerin posizyonu static durumda, birinci <div> etiketine (.red_static) margin-left değeri 300px olarak verilmiştir. Sonuç izlendiğinde sayfanın sol tarafından 300px’lik boşluk verilmiş kırmızı renkteki birinci blok bu 300px’lik boşluktan sonra konumlanmıştır. Ayrıca arkasından gelen mor renkli ikinci blok ve gri renkli üçüncü blok static olmalarından dolayı; kendilerinden önce gelen kırmızı etiketin sağında olması gerektiği gibi yerlerini almıştır.
Alt sıradaki yatay olarak hizalanmış blokları incelediğimizde, kırmızı bloka position değeri relative olarak verilmiş aynı zamanda sayfanın sol tarafından 300px boşluk left komutu kullanılarak verilmiştir. (margin-left kullanılmamıştır.) Sonuç izlendiğinde; kırmızı blok sol taraftan (sayfanın sol sınırından) 300px kayarak gri blokun sağ tarafına geçmiştir. Mor renkli blok static örneğinde olduğu gibi kırmızı bloka göre kendi pozisyonunu değiştirmemiş, kırmızı blokun ilk pozisyona (left:300px değeri almadan önceki pozisyonuna göre ) göre kendini konumlandırmıştır. Relative göreceli mantığı buradan gelmektedir. Kırmızı blok bambaşka bir yerlerde olmasına rağmen arkasından gelen elementler konumunu sanki kırmızı renkli blok ilk konulduğu yerde varmış gibi konumlanmasıdır. Eğer sol taraftan verilecek boşluk left özelliği değilde margin-left özelliği ile verilmiş olsaydı sonuç static örneğindeki (ilk satır) ile aynı olacaktı. Posizyonun göreceli (relative) olması verilen konumlandırma değerlerine (left,right,top,bottom) bağlıdır.
Absolute Position ( Mutlak Konumlandırma )
absolute position mutlak konumlandırma
Mutlak (absolute) konumlandırma yapılan elementten sonra eklenen element kendisinden önce bulunan elementin konumunu yokmuş gibi davranarak yerine geçecektir. Mutlak konumlandırmaya sahip element left,righ,top,bottom özellikleri ile konumlandırılabilir. HTML’de enson eklenen etiket katman (layer) mantığına göre en üstte gözükecektir. Mutlak (absolute) konumlandırma değerini alan element konumlandırmada hayalet gibi hiç bir etiketin konumlandırmasına etki etmeyecek şekilde konumlanabilir. Tek alınacak kıstas 3 boyutlu ortamda düşünülerek hangi katmanda bulunduğu, veya hangi katmanın üstünde veya altında kaldığı ile ilgilidir. Örneği incelemek için tıklayınız…
See the Pen absolute position by Emre (@esencan) on CodePen.
Yukarıdaki örneği incelediğimizde; HTML sayfasında yer alan ilk paragraf etiketine CSS’de mutlak (absolute) konumlandırma değeri verilmiş olup, bu elementten önce element bulunmamasından dolayı sayfanın sol üst köşesine göre konumlanır. HTML sayfasında ikinci element olarak bir resim etiketi eklenmiş (mavi renkli resim) fakat bu etiketi static olarak konumlanmıştır. İlk paragraf etiketinin absolute (mutlak) konumlandırılmasında dolayı img etiketi de ilk etiket yokmuş gibi sayfanın sol üst köşesine göre konumlanmıştır. Dolayısı ile bu resim etiketinden sonra eklenen h2 başlık etiketi; resim etiketinde mutlak bir konumlandırma olmamasından dolayı kendi konumunu resim etiketine göre konumlandırmıştır. Fakat başlık (h2) etiketi için CSS ile müdahale edilerek pozisyonuna mutlak (absolute) değeri verilerek, top:50px değeri ile sayfanın en üstünden 50px boşluk verilerek mavi resminin de üstüne çıkartılmıştır. Paragraf etiketinden sonra sınıf ismi “paragraf_uzun” plan paragraf etiketi eklenmiş, CSS ile tüm paragraf etiketleri mutlak konumlandırılmasından dolayı aldığı top:100px değeri ile yukarıdan 100px aşağıda konumlanmıştır.
Son olarak eklenen sınıf ismi “resim2” olan img etiketi ile gri renkli resim eklenmiş, doğal olarak ilk img etiketinden sonra konumlanmıştır. (mavi resim hariç tüm etiketler mutlak konumlandırılmış) resim2 sınıf ismi ile pozisyon değeri mutlak (absolute) verilerek herhangi bir boşluk değeri girilmemiştir. Görüldüğü üzere “paragraf_uzun” sınıf ismine sahip paragraf etiketi, son eklenen etiket bir öncekinin üstündeki katman olacak şekilde konumlandığından ikinci img etiketinin altından geçmektedir.
Fixed Position (Sabitlenmiş Konumlandırma)
HTML sayfalarındaki elementlerin sayfa içinde sabitlenmiş durumudur. Düşününki sayfayı aşağı yukarı hareket ettiriyorsunuz örneğin bir navbar sayfa aşağıya gitse de her zaman sayfanın üstünde görüyorsunuz. Başka bir örnek vermek gerekirse birçok web sayfasında, sayfanın sağ alt tarafında yukarı ok işareti veren bir resim görmüşsünüzdür, bastığınızda sayfa başına götürür sizi, konumlandırma mantığında fixed bulunmaktadır.
See the Pen fixed position by Emre (@esencan) on CodePen.
Sticky Position ( Yapışkan Konumlandırma )
Yapışkan konumlandırma aslında absolute (mutlak), fixed (sabitlenmiş) ve relative (göreceli) konumlandırmaların melezi bir konumlandırma değeridir. Mantığına baktığınızda bir elementin mutlak olduğu (diğer elementlerin pozisyonu etkilemez), aynı zamanda sayfada elementi belirli bir noktaya kadar normal olarak konumlandıran fakat sayfanın aşağıya yukarıya çıkma/inme durumuna göre belirlediğiniz noktada hem mutlak ve sabit olabilen bir konumlandırmadır. Aşağıdaki örneği incelemek için tıklayınız..
See the Pen sticky position by Emre (@esencan) on CodePen.
Z-index Konumlandırma
Web sayfasındaki elementleri 3 boyutlu düşünürsek üst üste gelecek elemanların hangisinin hangisine göre üstte veya altta olduğunu belirlemek için kullanılan özelliktir. Normal şartlarda varsayılan olarak z-index değeri “auto”‘dur. HTML sayfasındaki en önce eklenmiş etiket en altta, en son eklenen etiket en üstte konumlandırılır. Kullanılan etiketler eğer sayfanın x-y ekseninde çakışmıyorlarsa hangisinin altta veya üstte olmasın bir mantığı yoktur. Ama eğer bir çakışma söz konusu ve allta olmasını istediğiniz etiket üstte veya tam tersi gözüküyorsa o zaman bu elementlerin z eksenindeki konumlarına CSS ile müdahale edebilir z-index özelliği ile sıra değeri ataya biliriz. Aşağıdaki örneği incelemek için tıklayınız..
See the Pen z-index by Emre (@esencan) on CodePen.
Yukarıdaki örnekte normal şartlarda varsayılan olarak ilk etiket en altta son eklenen en üste gözükmesi gerekirken, sayfada bulunan 3 adet div etiketinin birincisine z-index:3 değeri ikincisine 2 ve sonuncusuna 1 değeri verilerek ilk <div> etiketinin en üstte ikincinin orta ve üçüncüsünün en altta gözükmesi sağlandı.
Konu Anlatım Videosu
Diğer anlatım videolarına ulaşmak için aşağıdaki linkleri takip edebilirsiniz.
Sıfırdan Temel CSS Dersleri Oynatma Listesi #cssdersleri
https://www.youtube.com/watch?v=tj0tEhaE3cY&list=PLGgCXWTaAx64w_xjGFpc8MYvEujWtrMq_
Temel HTML Dersleri Oynatma Listesi #htmldersleri
https://www.youtube.com/watch?v=71zqwXY93Eg&list=PLGgCXWTaAx658ixB20FC-XmOtPwBXWZow
Son Yorumlar