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:

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:

css relative

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:

css absolute

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; 
   
}

css absolute

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:

css fixed

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:

css sticky

Ö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  
     }

css z-index

Tarayıcı Destediği


Özellik chrome.svg explorer.svg firefox.svg safari.svg opera.svg
position 1.0 7.0 1.0 1.0 4.0
Not: Internet Explorer, Edge 15 ve önceki sürümler yapışkan ( sticky ) konumlamayı desteklemez. Safari, bir -webkit öneki gerektirir. Ayrıca en az bir özelliği belirtmelisiniz top, right, bottom veya left, yapışkan konumlandırma çalışması için.

EFRAN ÇULHA 23/03/2020

Nasıl yazı konumlandırırım acaba?

yönetici 23/03/2020

Efran, paragraf html etiketi ekle bir sınıf ata margin veya konumlandırma ile websayfanın her yerine parağrafı götürürsün.

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

Misal, test sınıfına margin:50px ver dene.

Mahmut Furkan KARAKAYA 25/01/2021

Bu konuları bu kadar iyi anlatan başka yer yok sanırım. CSS3 ile ilgili Türkçe kitaplar aldım. Display, Position gibi konulara 2 sayfa değinmişler; absolute ve relative özelliğini anlatmış bırakmışlar. Ve konuyla ilgilenenlere de para harcatarak ayıp etmişler. Açıklayıcı anlatımınız için teşekkür ederim.

Ahmet Hasra 26/06/2021

Bu kadar güzel bir anlatım başka yerde denk gelmedim. Youtube dan o kadar video izledim position olayını anlamamıştım. Burada tek okuyuşta kafaya oturdu. Teşekkürler.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

9838

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.