position Özelliği

position özelliği, elementlerin konumlandırma yöntemini belirler. Bu özellik en çok üstten, sağdan, alttan ve soldan sırasıyla boşlukları ayarlayan top, right, bottom, left özellikleri ile birlikte kullanılır.

Sözdizimi

cssseçici {
  position: absolute | relative | fixed | static | sticky;
}

position için Değerler

Değer	Açıklama
`absolute`	Mutlak konumlandırma. Element, normal belge akışından çıkarılır ve (en varsa) en yakın konumlandırılmış üst öğeye göre veya tarayıcı penceresine göre konumlandırılır.
`relative`	Göreli konumlandırma. Element, belge akışındaki normal konumuna göre kaydırılır, ancak kapladığı alan rezerve edilmiş olarak kalır.
`fixed`	Sabit konumlandırma. Element, normal belge akışından çıkarılır ve tarayıcı penceresine göre konumlandırılır. Sayfa kaydırıldığında yerinde kalır.
`static`	Statik konumlandırma. Bu değer, konumlandırma olmadığı anlamına gelir ve element normal şekilde davranır.
`sticky`	Yapışkan konumlandırma. Element, kaydırma sırasında belirlenmiş bir konuma ulaşana kadar `relative` gibi davranır, daha sonra belirtilen yere yapışır (`fixed` gibi).

Varsayılan değer: static.

Örnek . Mutlak Konumlandırma

Elementi ekranın sol üst köşesine küçük boşluklarla yerleştirelim:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Örnek . Mutlak Konumlandırma

Şimdi elementi ekranın sağ üst köşesine küçük boşluklarla yerleştirelim:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Örnek . Sabit Konumlandırma

Sabit konumlandırmada element kaydırma sırasında yerinde kalacaktır:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Örnek . Göreli Konumlandırma

Göreli konumlandırmada element, normal konumuna göre kaydırılır, ancak diğer elementler, element kaydırılmamış gibi davranır:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

Örnek . İç İçelik

Eğer üst öğenin position özelliği relative değerine sahipse, o zaman mutlak konumlandırılmış elementler üst öğeye göre konumlandırılacaktır:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Örnek . İç İçelik

Eğer üst öğenin position özelliği absolute değerine sahipse, o zaman mutlak konumlandırılmış elementler üst öğeye göre konumlandırılacaktır:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Örnek . Yapışkan Konumlandırma

Bir elementin position özelliği sticky değerine sahipse, element kaydırma sırasında belirlenmiş bir konuma ulaşana kadar relative gibi davranır, daha sonra yere yapışır. Yapışkan bir başlık yapalım:

html<h1>Ana Site Başlığı</h1>

<div class="header">başlık başlık başlık</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

Örnek . Konumsuz

Eğer bir elemente konum belirtilmeden mutlak konumlandırma verilirse, element konumlandırma olmadan durduğu yerde kalacak, ancak diğer elementler onu fark etmeyecektir:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Örnek . Tek Eksen

Mutlak konumlandırmada konum sadece bir eksende belirtilebilir. Örneğin, top özelliğini belirlersek, dikeyde element istenen konuma yerleşecek, yatayda ise durduğu yerde kalacaktır:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Örnek . Tüm Konumlar

Mutlak konumlandırmada genişlik ve yükseklik belirtmeden tüm taraflardan konum belirtilebilir. Bu durumda element üst bloğun ortasına yerleşecektir:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

Ayrıca Bakınız

elementlerin üst üste gelmesini ayarlayan z-index özelliği