CSS POSİTİON (Konumlandırma) NEDİR?

CSS konumu (position) özelliği, adından da anlaşılacağı gibi, öğenin web sayfasında nasıl konumlandırıldığını tanımlar. CSS konum (position) özelliği, komut dosyası animasyon efektlerinin kullanımını basitleştirmek için öğeler için alternatif konumlandırma kuralları seçmenize izin verir. Birkaç konumlandırma türü vardır:

• Static :Varsayılan olarak HTML elemanları statik olarak konumlandırılmıştır. Statik bir konumlandırılmış eleman her zaman sayfanın normal akışına göre konumlandırılır. Top, right, bottom, left ve z-index özellikleri bu öğe için geçerli deÄŸildir.
• Relative :Göreceli olarak konumlandırılmış bir öğe normal konumuna göre konumlandırılmıştır. Göreceli olarak konumlandırılan elemanlar, diÄŸer elementler taşınır ve katmanlar(gimp, photoshop gibi resim katmanları) halinde bulunabilir, ancak element için ayrılan alan normal akışta korunur.
• Absolute :Kendisini kapsayan bir üst öğeye relative konumlanmışsa öğeye göre konum almaktadır. Böyle bir eleman bulunmazsa, nesne web sayfasına göre konumlanacaktır.
• Fixed: SabitlenmiÅŸ bir eleman tarayıcı penceresine göre konumlandırılmıştır. Pencere kaydırılmış olsa bile hareket etmeyecektir.
• Sticky :Yapışkan öğe göreceli ve sabit, kaydırma konumuna baÄŸlı arasında geçiÅŸ yapar. OluÅŸturulan eleman kaydırma çubuÄŸu gelene kadar position:relative gibi davranır, kaydırma çubuÄŸu geldikten sonra position:fixed gibi davranır.

position: static;

HTML elemanları varsayılan olarak statik olarak konumlandırılmıştır. Statik yerleştirilmiş elemanlar Top, bottom, left, ve right özelliklerden etkilenmez.

Bir eleman position: static herhangi özel bir ÅŸekilde konumlandırılmamıştır; her zaman sayfanın normal akışına göre konumlandırılır.

position: relative;

Göreceli olarak konumlandırılmış bir elemanın Top, right, bottom ve left özelliklerini ayarlamak, normal konumundan uzaklaşmasına neden olur. Diğer içerik, öğenin bıraktığı herhangi bir boşluğa sığacak şekilde ayarlanmayacaktır.

ÖRNEK :

<div>kutu1</div>

<div class="kutu">kutu2</div>

<div>kutu3</div>

<div>kutu4</div>

CSS:

div{
    width:200px;

    height:200px;

    background-color: #00ff75;

    font-size:20px;

    margin-left:10px;

    float:left;
}
.kutu{
    position: relative;

    top:220px;

    left:30px;
} 
      

ÇIKTI:

Yukarıdaki örnekte relative (göreceli) olarak konumlandırılmış elemanın nitelikleri deÄŸiÅŸtiÄŸinde nasıl hareket ettiÄŸini göreceksiniz. Float komutu ile yanyana dizilmiÅŸ kutularımız var. Ä°kinci kutu , normal konumdan sola ve aÅŸağıya hareket eder. Üçüncü ve dördüncü kutular ise aynı yerde kalır, çünkü ilave konumlandırma özelliklerinin hiçbiri deÄŸiÅŸtirilmemiÅŸtir.

position: absolute;

Konumlandırılmış bir ata öğesi bulunmadığı durumlarda, doğrudan web sayfasına göre konumlandırılacaktır .

ÖRNEK:

<div> <div>

CSS:

div{
    width:100px;

    height:100px;

    background-color: #00ff75;

    position: absolute;

    right:0;

    bottom:0;
}

ÇIKTI:

Absolute konumlandırmada bir ata eleman ve çoçuk eleman varsa, Kendisini kapsayan bir üst öğeye relative konumlandırma verilmiÅŸse çoçuk eleman öğeye göre konum almaktadır.

ÖRNEK:

<div class="parent">

  <div class="child"></div>

</div>

CSS:

.parent { 
  position: relative; 

  width: 500px;

  height: 400px;  

  border: solid 3px #4480db; 
} 

.child { 
  position: absolute;

  right: 40px; 

  top: 100px; 

  width: 200px; 

  height: 200px; 

  border: solid 3px #78e484; 
   
}

position: fixed;

Sabitlenmiş (fixed) bir eleman tarayıcı penceresine göre konumlandırılmıştır. Pencere kaydırılmış olsa bile hareket etmeyecektir.

ÖRNEK

<div class="icerik">

    <p>Lorem ipsum...... </p>

    <p>Lorem ipsum...... </p>

    <p>Lorem ipsum...... </p>

    <p>Lorem ipsum...... </p>
    
  </div>
<div class="kutu">
</div> 
 

CSS:

.icerik{

    width:400px;

    height:1400px;

    border:2px solid #4480db; 
}
.kutu{

    width:50px;

    height:50px;

    background-color:#78e484;

    position: fixed;

    right:20px;

    top:70px; 
}

ÇIKTI:

position: sticky;

Yapışkan (sticky) öğe göreceli ve sabit konumlandırma arasında geçiÅŸ yapar. OluÅŸturulan eleman kaydırma çubuÄŸu gelene kadar position:relative gibi davranır, kaydırma çubuÄŸu geldikten sonra position:fixed gibi davranır.

ÖRNEK:

<p>Lorem ipsum </p>

<p>Lorem ipsum </p>

<div class="sticky">sticky(yapışkan) div</div>

<p>Lorem ipsum </p>

<p>Lorem ipsum </p>

CSS:

.sticky {
  position: -webkit-sticky;

  position: sticky;

  top: 0;

  padding: 5px;

  background-color: #77aaf6;

  border: 2px solid #4480db;
}

ÇIKTI:

Örtüşen Öğeler

Konumlandırma yaparken Nasıl photosop gibi programlarda resimleri üst üste (katman) dizebiliyorsak, CSS z-index özelliÄŸi ile bunu belirleyip herhangi bir HTML öğesinin diÄŸerinin üzerinde ya da altında görünmesini saÄŸlayabiliriz.

CSS:

 box{
     position: absolute;

     left:0px;

     top:0px;

     z-index:-11  
     }

Tarayıcı Destediği

Özellik
position	1.0	7.0	1.0	1.0	4.0

<p class="test">metini buraya yaz</p>