CSS POSITION (KONUMLANDIRMA) ÖZELLİKLERİ

Merhaba...

CSS ile sayfadaki elemanları farklı şekilde konumlandırabiliyoruz.. Sitelerde , sayfa aşağıya kaydırılsada  sabit duran menüler , resimler üzerine yazılan yazılar vs gibi yapılar bu konumlandırma özellikleri ile yapılır..

POSITION

CSS'te "position" konum anlamına gelir. Elemanların sayfada nasıl konumlanacağını belirler.   Static, Relative, Absolute , Fixed ve Sticky olmak üzere  5 farklı değer alır.. Konum özelliği alan elemanlar yerleşimleri için TOP - LEFT - RIGHT ve BOTTOM özellikleri kullanılır..

STATIC 

Sayfadaki elemanların varsayılan konumlandırmasıdır. Diğer konumlandırmalardan farklı olarak top-right-bottom ve left değeri alamaz..

RELATIVE (GÖRECELİ)

Göreceli konumlandırmadır. Elemana yön değerleri (top,right,bottom,left) verildiğinde etrafındaki elemanlara göre konumlanır. 

• TOP : Konumlanmış elemanın üstündeki elemandan uzaklaşacağı mesafeyi, 
• RIGHT: Konumlanmış elemanın sağındaki  elemandan  (varsa) uzaklaşacağı mesafeyi,
• BOTTOM: Konumlanmış elemanın altındaki  elemandan  (varsa) uzaklaşacağı mesafeyi,
• LEFT: Konumlanmış elemanın solundaki elemandan  (varsa) uzaklaşacağı mesafeyi belirler..

Relative konumlandırma ile yapılan yerleşimlerde, Marginden farklı olarak, diğer elemanlar bu yerleşimden etkilenmez ve konumlarını korurlar. 

Örneğin normal yerleşimde alt alta duracak olan  50px*50px boyutlarındaki 2 div'den üsttekine RELATIVE konumlandırma uygulayalım...

CSS

div { width:50px; height:50px;margin-bottom:10px; background-color:skyblue;}
.posrel { position:relative;top:25px;left:25px;background-color:orange;}

HMTL

<div class="posrel"> Div 1 </div>
<div> Div 2 </div>

EKRAN

Yukarıda, turuncu div'e position relative uygulanmış (Top:25px ve Left:25px). Dolayısıyla üstten 25px soldan 25px uzaklaşan turunvu div, relative konumlandırma aldığı için mavi divin üzerine gelir. Margin-top yada margin-left özellikleri ile bu değerler verilmiş olsaydı , mavi div ile çakışma olmayacak, verilen mesafe değerleri kadar mavi div'de kaymış olacaktı...

Relative konumlanmış elemanlara ayrıca margin değerleride alabilirler..

ABSOLUTE (MUTLAK)

Absolute mutlak anlamına gelir. Eleman "html" de yazıldığı yer neresi olursa olsun , sayfadaki diğer elemanlara bakmadan doğrudan sayfa kenarlarını baz alarak konumlanır. Yani elemana yön değerleri (top,right,bottom,left) verildiğinde etrafındaki elemanlara göre değil sayfa kenarlarına göre konumlanır. 

• TOP : Konumlanmış elemanın sayfa üst kenarından uzaklaşacağı mesafeyi, 
• RIGHT: Konumlanmış elemanın sayfa sağ kenarından uzaklaşacağı mesafeyi,
• BOTTOM: Konumlanmış elemanın sayfa alt kenarından   uzaklaşacağı mesafeyi,
• LEFT: Konumlanmış elemanın sayfa sol kenarından   uzaklaşacağı mesafeyi belirler..

Absolute konumlandırma ile yapılan yerleşimlerde, diğer elemanlar bu yerleşimden etkilenirler ve Absolute konumlanan eleman sayfada yokmuş gibi konumlanırlar.....

Örneğin normal yerleşimde alt alta duracak olan  50px*50px boyutlarındaki 2 div'den üsttekine ABSOLUTE konumlandırma uygulayalım.

CSS

div { width:50px; height:50px;margin-bottom:10px; background-color:skyblue;}
.posabs { position:absolute; top:25px;left:25px;background-color:orange;}

HMTL

<div class="posabs"> Div 1 </div>
<div> Div 2 </div>

EKRAN

Yukarıda, turuncu div'e position absolute uygulanmış (Top:25px ve Left:25px). Dolayısıyla turuncu div sayfada hiç bir şey yokmuş gibi sayfa kenarlarını baz alarak yerleşir... Mavi div ise , HTML'de turuncu divden sonra gelmesine rağmen , o yokmuş gibi sayfa başına yerleşir.. Üst kenardan 25px sol kenardqan  25px uzaklaşan turunvu div, aboslute konumlandırma aldığı için mavi divin üzerine gelir.  

Absolute konumlanmış elemanlara da  ayrıca margin değerleride alabilirler.. 

ÖRNEK

Turuncu divi sayfanın sağl alt köşesine konumlandırmayı deneyelim. Bunun için bottom ve right değerlerini vermemiz gerekir..

CSS

div { width:50px; height:50px;margin-bottom:10px; background-color:skyblue;}
.posabs { position:absolute; bottom:25px;right:25px;background-color:orange;}

HMTL

<div class="posabs"> Div 1 </div>
<div> Div 2 </div>

EKRAN

Yukarıda, turuncu div'e bottom:25px ve right:25px değerleri uygulanmış. Dolayısıyla sayfanın sağ alt köşesine yerleşirken , mavi div o yokmuş gibi üste yerleşir..

Absolute konumlandırma ile sayfa kenarlarına göre konumlanan elemanlar , sayfa aşağı kaydırıldığında belirtilen konumlarında sabit kalamazlar.. Bunun için diğer bir konumlandırma değeri olan FIXED kullanılır...

KAPSAYICI İÇİNDE ABSOLUTE KONUMLANDIRMA

Bir elemanın sayfanın kenarlarına göre değilde , içinde bulunduğu elemanın kenarlarına göre absolute konumlanması için ,  içinde bulunduğu kapsayıcıya relative konumlandırma uygulanmalıdır....

Önce kapsayıcısında relative konumlandırma olmayan bir yapı oluşturalım..

CSS

.container {
    width:50%; 
    height:100px;   
    margin:2rem auto;
    background-color: skyblue;
}
.posabs{
   position:absolute; 
   bottom:25px;right:25px;
   background-color: orange;
}
 

HMTL

<div class="container">
    <div class="posabs"> Abs. Div </div>
</div>

EKRAN

Yukarıda sayfaya ortalanmış mavi container div içerisinde absolute konum verilmiş turuncu div , kapsayıcısına (container) relative uygulanmadığı için sayfa kenarlarına göre yerleşir. Aldığı değerler bottom:25px ve right:25px olduğu için de sayfanın sağ alt kenarına yerleşir..

Eğer container div'e relative konumlandırma eklersek, bu kez turuncu div sayfa kenarlarına göre değik container kenarlarına göre konumlanır..

CSS

.container {
    width:50%; 
    height:100px;   
    margin:2rem auto;
    background-color: skyblue;
    position:relative;  /*relative konumlandırma eklendi..*/
}

EKRAN

Container div, relative konumlandırma aldığı için bu kez içindeki Abs Div, container kenarlarına göre yerleşmiş oldu...

FIXED (SABİT)

Fıxed sabit anlamına gelir. Eleman "html" de yazıldığı yer neresi olursa olsun , sayfadaki diğer elemanlara bakmadan doğrudan sayfa kenarlarını baz alarak konumlanır. Yani elemana yön değerleri (top,right,bottom,left) verildiğinde etrafındaki elemanlara göre değil sayfa kenarlarına göre konumlanır. Absolute konumlandırmadan farklı olarak konumlandığı yerde sabit kalır. Yani saufa aşağıya kaydırılsa bile , aynı yerinde durur.. Sayfa aşağıya kaysada sabit duran menülerde, sayfa yanlarındaki reklamlarda vs kullanılabilir..

• TOP : Konumlanmış elemanın sayfa üst kenarından uzaklaşacağı mesafeyi, 
• RIGHT: Konumlanmış elemanın sayfa sağ kenarından uzaklaşacağı mesafeyi,
• BOTTOM: Konumlanmış elemanın sayfa alt kenarından   uzaklaşacağı mesafeyi,
• LEFT: Konumlanmış elemanın sayfa sol kenarından   uzaklaşacağı mesafeyi belirler..

FIXED konumlandırma ile yapılan yerleşimlerde, diğer elemanlar bu yerleşimden etkilenirler ve Fixed konumlanan eleman sayfada yokmuş gibi konumlanırlar.....

Örneğin menü için kullanılacak bir nav etiketinin sayfa aşağıya kaydırılsada sabit kalmasını sağlayan örneğe bakalım..

CSS

nav {
  height:30px;
  background-color:orange;
  positon:fixed;
  top:0;
  left:0;
}
p { 
  width:50%;  
  padding:2rem;   
  line-height:2rem;
}

HMTL

<nav> MENÜ </nav>
<p> Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.</p>

EKRAN

Yukarıda, turuncu div'e position fixed uygulanmış (Top:0 ve Left:0). Dolayısıyla turuncu div sayfa aşağıya kaydırılsa dahi yerinde sabit kalacaktır.  Elemanların yerinde sabit kalıp kalmadığını anlayabilmek için , sayfanın yüksekliğinden taşan bir içeriğin olması gerekir...

FIXED konumlanmış elemanlara da  ayrıca margin değerleride alabilirler.. 

STICKY (YAPIŞKAN SABİT)

Sticky yapışkan  anlamına gelir. Eğer bir yapı yada elemanı belli bir noktaya geldiğinde sabit kalmasını istendiğinde kullanılır... Eleman "html" de yazıldığı yer neresi olursa olsun , sayfa kaydırıldığında belirtilen konum değerine gelidğinde orada sabit kalacaktır.  Sayfa üst kenarından daha aşağıda duran ancak sayfa kaydığında sayfanın üstüne yapışan menülerde, veya benzer sayfa yanlarındaki reklamlarda vs kullanılabilir..

• TOP : Elemanın sayfa üst kenarından ne kadar mesafede olunca sabit kalacağını, 
• RIGHT: Elemanın sayfa sağ kenarından ne kadar mesafede olunca sabit kalacağını, 
• BOTTOM: Elemanın sayfa alt kenarından ne kadar mesafede olunca sabit kalacağını, 
• LEFT: Elemanın sayfa sol kenarından ne kadar mesafede olunca sabit kalacağını  belirler..

Gebelde top değeri ile beraber kullanılır. 

STICKY konumlandırma ile yapılan yerleşimlerde, eleman yerini aldğında diğer elemanlar bu yerleşimden etkilenirler ve Sticky konumlanan eleman sayfada yokmuş gibi konumlanırlar.....

Örneğin menü için kullanılacak bir nav etiketinin , normal yerleşimde biraz aşağıda iken , sayfa aşağı kaydırıldığında üstte yapışmasını sağlayan örneğe bakalım..

CSS

nav {
  padding:2rem;
  background-color:orange;
  text-align:center;
  positon:sticky;
  top:0;
}
p {  padding:0 }

HMTL

<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Lorem, ipsum dolor sit amet consectetur, adipisicing elit.</p>
</p>
<nav> MENÜ </nav>
<p>
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Natus, facere? Temporibus voluptatum odit neque possimus ducimus iusto vel, sapiente ullam? Odio quasi illum doloribus, neque voluptatibus quia deleniti suscipit amet.
</p>

EKRAN

Yukarıda, turuncu div'e position sticky uygulanmış (Top:0). Dolayısıyla turuncu div sayfa aşağıya kaydırıldığında , top:0 noktasına gelince (üste dayalı) orada sabit kalacaktır...  Elemanların yerinde sabit kalıp kalmadığını anlayabilmek için , sayfanın yüksekliğinden taşan bir içeriğin olması gerekir...

STICKY konumlanmış elemanlara da  ayrıca margin değerleride alabilirler.. 

Z-INDEX

KOnum verilmiş birden fazla eleman , üst üste gelirse , hangisinin üstte olacağını belirler. Z-index değeri en büyük olan en üstte görünür. Eğer z-index değeri verilmez ise HTML'de en son yazılan eleman en üstte görünecektir..

CSS

div {width:150px;height:100px;color:#fff;padding:1rem;}
.div1 { position:absolute;top:100px;left:70px;background-color:red;}
.div2 { position:absolute;top:140px;left:90px;background-color:green;}
.div3 { position:absolute;top:190px;left:110px;background-color:blue;}

HMTL

 <div class="div1"> DIV 1 </div>
 <div class="div2"> DIV 2 </div>
 <div class="div3"> DIV 3 </div>

EKRAN

Yukarıdaki 3 div farklı top ve left değerlerinde absolute konumlandırılmış. Ancak z-index uygulanmadığı için , HTML'de yazıldıkları sırada üst üste gelirler. En üstte ise en son yazılan mavi div görünüyor.. Divlere z-index vererek sıralamayı değiştirelim...

Mavi için z-index : 1 ; 

Yeşil için z-index : 2 ; 

Kırmızı için z-index : 3 ; 

div {width:150px;height:50px;color:#fff;padding:1rem;}
.div1 { z-index:3;position:absolute;top:100px;left:70px;background-color:red;}
.div2 { z-index:2;position:absolute;top:140px;left:90px;background-color:green;}
.div3 { z-index:1;position:absolute;top:190px;left:110px;background-color:blue;}

EKRAN

Z-şndex değeri en büyük (3) olan kırmızı div bu kez en üstte , z-index değeri en düşük (1) olan mavi div en altta , yeşil ise ortada  (2) görünür!

Görüşmek üzere...