Css' de nesneleri konumlandırmak için kullandığımız yöntemlerden biri floating, bir diğeri ise position özelliğidir.
Tüm html etiketleri başlangıç ayarı olarak belli gruplara aittir; yani Inline ya da Block etiket grubundalardır. Dolayısıyla bu grupların davranış özelliklerine göre nesneler birbirlerinden etkilenerek sayfa üzerinde görünürler. Yani yan yana gelmeleri ya da alt alta gelmeleri gibi.
Peki bu durum bize yeterli gelmez ve bazı nesnelerin konumlarını değiştirmek isteriz. Bu durumda bir önceki dersimizde floating ile nesneleri yan yana getirebildik.
Floating özelliğinde gördüğümüz gibi nesneler hep birbiri ardına gelerek kendilerine bir konum oluştururlar. Örneğin nesnelere float:left; dediğimizde sol tarafa doğru birbiri ardına gelirler.
** Nesnelerin bu şekilde birbirinden etkilenerek sayfa üzerinde konumlanmasına html etiketlerinin normal akış davranışı denir.
Biz her zaman normal akış içinde davranmak istemeyiz. Örneğin bir nesneyi sayfa üzerindeki diğer nesnelerden bağımsız olarak başka bir konuma getirmek isteyebiliriz ya da bir <div> etiketini sayfanın bir konumunda sabitleyerek durmasını isteyebiliriz. Bu gibi durumlarda css position özelliğini kullanmalıyız.
Css Position' ın alabileceği farklı değerler vardır.
Position : static | relative | fixed | absolute | sticky
Position Static Nedir ve Nasıl Kullanılır ?
Html etiketleri başlangıç ayarı yani varsayılan olarak static biçimde davranış gösterirler. Yani normal akış içinde birbirlerinden etkilenerek davranış gösterirler. ** Static nesneler için top, right, bottom ve left konumlandırma özellikleri kullanılamaz.
Position Relative Nedir ve Nasıl Kullanılır ?
Bir nesneye position:relative; dediğimizde nesne gene normal akış içerisinde olmaya devam eder ancak top, right, bottom ve left özelliklerini kullanma fırsatı verir.
<div id="first" class="box"></div> <div id="second" class="box"></div> <div id="third" class="box"></div>
.box{
width: 150px;
height: 150px;
margin: 5px;
}
#first{
background: red;
}
#second{
background: blue;
position:relative;
top:50px;
}
#third{
background: green;
}
Örnek 1 için için tıklayınız.
#second div' ine verdiğimiz position:relative; özelliğinden dolayı top:50px; kullanımını yapabildik ve nesne yukarıdan yani olduğu konumdan itibaren 50px aşağıya iner. Ancak sonrasında gelen elemanları aşağıya itmediğine ve mevcut konumundan itibaren 50px aşağıya indiğine dikkat ediniz.
ve aynı şekilde nesneyi 4 köşeden konumlandırabiliriz.
Örnek 2 için için tıklayınız.
Burada z-index özelliğini de kullandık. z-index özelliği css 'de nesnelerin hangisinin önde hangisinin arkada olduğuyla alakalıdır. Yani örneğimizde varsayılan olarak mavi kutu yeşil kutunun üstünde görünürken mavi kutu için z-index:-1; dediğimizden dolayı yeşil kutunun arkasına gider.
** Yani z-index sayısal olarak değer alır ve sayısal büyüklüğe göre ya arkaya ya da öne gelir.
Position Absolute Nedir ve Nasıl Kullanılır ?
Bir nesnenin position özelliğini absolute yaptığımızda o nesne normal akış içinden çıkar ayrıca 4 köşeden konumlandırma yapmamızı sağlar. Relative ile Absolute nesnelerin farkı normal akış içinde olup olmadığı farkıdır.
#second{
background: blue;
position:absolute;
top:50px;
left:50px;
}
Örnek 3 için için tıklayınız.
Örnekte görüldüğü gibi mavi kutu normal akışın dışına çıktığından dolayı diğer iki kutu mavi kutuyu görmezde gelir ve mavi kutunun olduğu yeri doldururlar.
Mavi kutu normal akış içinde olmadığından dolayı konumlandırma başlangıcını sayfanın sol üst köşesinden yapar. Aslında burada sol üst köşe derken body' den bahsediliyor. Çünkü her hangi bir absolute nesne kendini konumlandırmak için bir relative nesnenin kapsamında olmayı bekler ki burada kapsayıcı hiç bir eleman olmadığından dolayı body mavi kutu için bir kapsayıcı elemandır ve konumlandırmasını body 'e göre yapar.
Örneğimizi şu şekilde değiştirdiğimizde artık konumlandırmamızı body' e göre değil de başka bir kapsayıcı elemana göre yapmış oluruz ancak bu kapsayıcı elemanın relative bir nesne olma zorunluğu vardır.
<div id="first" class="box"></div> <div id="second" class="box"> <div id="inner" class="inner-box"> </div> </div> <div id="third" class="box"></div>
.box{
width: 150px;
height: 150px;
margin: 5px;
}
#first{
background: red;
}
#second{
background: blue;
position:relative;
top:50px;
left:50px;
}
#third{
background: green;
}
.inner-box{
width: 50px;
height: 50px;
background-color:white;
}
#inner{
position:absolute;
top:10px;
left:20px;
}
Örnek 4 için için tıklayınız.
Burada #inner ismindeki div absolute olarak belirtildi ancak dikkat edersiniz ki bu div 'in bir kapsayıcı elamanı var ve bu kapsayıcı eleman relative bir nesne olduğundan dolayı konumlandırmasını bu mavi kutunun sol üst köşesinden başlayarak yapar aksi halde body etiketinden itibaren konumlandırılma yapılırdı.
** Mavi kutuyu sayfada nereye götürürsek götürelim beyaz kutu mavi kutu içinde hep aynı konumda kalmaya devam eder.
Position Fixed Nedir ve Nasıl Kullanılır ?
Css fixed' in ne olduğunu anlamak için ilk önce html' de sıklıkla duyduğumuz viewport kavramın ne olduğunu ve hangi amaçla kullanıldığını bilmeliyiz.
Viewport: Sayfanın o anki görüntü alanına viewport denir. Yani 1200px' lik toplam yüksekliğe ve 800px genişliğe sahip olan bir web sitesinin küçük bir tarayıcıda açıldığını düşünelim ve bu tarayıcı bize sitenin sadece 600px lik yükseklik ile 400px' lik genişliğini gösterebiliyorsa o tarayıcının viewport' u 600 x 400 px diyebiliriz.
Viewport' un ne olduğunu anladıktan sonra position fixed 'in ne olduğunu daha iyi anlayabiliriz. Tarayıcının viewport' una bağlı olarak sabit bir yerde konumlanan nesneler oluşturmak istiyorsak position fixed kullanmamız gerekiyor. Tarayıcının viewport' una bağlı olarak derken kastedilen yatay ve dikey kaydırma çubuklarının kullanılmasına rağmen nesnenin konumu hep sabit kalmasındandır. Bizim için başlangıç noktası o anki viewport' dur.
<div class="fixed"> This element has position: fixed; </div>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 250px;
border: 4px solid red;
}
Örnek 5 için için tıklayınız.
Örneğimizde .fixed sınıfına sahip olan eleman sayfanın hep sağ alt köşesinde sabit kalır. Kaydırma çubuklarını kullanmış olduğumuzda oluşan her viewport alanına göre tekrar konumlandırma yapılır ki; bu konumlandırma zaten sayfanın sağ alt köşesidir.
Position Sticky Nedir ve Nasıl Kullanılır ?
Position: sticky kaydırma çubuklarını takip eder ve istenilen pozisyon yakalandığında nesneyi o noktada sabitler. Örneğin bir nesne için yukarıdan 0 konumuna geldiğimiz anda nesnenin sabitlenmesini isteyebiliriz. Genelde menüler için sticky postion kullanılır.
<div class="sticky"> This element has position: sticky; </div>
.sticky {
position: sticky;
top: 0;
width: 250px;
border: 4px solid red;
}
Örnek 6 için için tıklayınız.