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

Lorem ipsum......

Lorem ipsum......

Lorem ipsum......

Lorem ipsum......

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:

Lorem ipsum

Lorem ipsum

sticky(yapışkan) div

Lorem ipsum

Lorem ipsum

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.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5389

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.