Çalıştırılabilir CSS Dokümanları: CSS position

Q: Bir element ebeveynine göre absolute olarak nasıl konumlandırılır?

Ebeveyne position: relative;, çocuğa ise top: 0; right: 0; gibi uzaklıklarla birlikte position: absolute; ver. Konumlandırılmış bir ebeveyn olmadan çocuk sayfaya göre yerleşir.

Q: relative ile absolute konum arasındaki fark nedir?

relative elementi akışta tutar ve yalnızca nerede çizildiğini kaydırır; orijinal yerini boş bırakır. absolute ise onu akıştan çıkarır ve konumlandırılmış atasına göre yerleştirir.

Q: position: sticky neden çalışmıyor?

Genellikle üç şeyden biri: hiçbir top (ya da başka bir uzaklık) ayarlanmamıştır, bir atanın overflow: hidden ya da auto değeri vardır ve kaydırma kapsayıcısı olur, ya da sticky elementin ebeveyni elementten uzun değildir, bu yüzden yapışacak yer yoktur.

Q: fixed ile sticky arasındaki fark nedir?

fixed akıştan çıkarılır ve viewport'a sabitlenir (bir atanın transform ya da filter değeri yoksa). sticky ise akışta kalır ve uzaklığına ulaşana kadar normal şekilde kayar, sonra ebeveyni hâlâ ekrandayken yapışır.

Tek örnekte position: absolute

Absolute konumlandırılmış bir element normal akıştan çıkarılır ve top, right, bottom ve left ile yerleştirilir. Bu uzaklıklar position değeri static dışında olan en yakın atadan ölçülür; ebeveynin position: relative almasının nedeni budur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

.card üzerinden position: relative'i sil, rozet bütün sayfanın sağ üst köşesine zıplar, çünkü artık konumlandırılmış bir atası yoktur. Bu tek satır, "position absolute çalışmıyor" sorularının çoğunu açıklar.

Absolute elementler hakkında bilmen gerekenler:

Yer kaplamazlar. Başlık ve paragraf, rozet yokmuş gibi yerleşir.
Genişlikleri içeriklerine uyacak şekilde küçülür, width ya da hem left hem right vermedikçe.
Uzaklıklar kapsayıcı bloğun padding kenarına, kenarlığının içine göre ölçülür.

Beş position değeri

Değer	Akışta mı?	Uzaklıklar neye göre ölçülür	Tipik kullanım
`static` (varsayılan)	Evet	Uzaklıklar yok sayılır	Normal elementler
`relative`	Evet, yeri korunur	Kendi normal konumu	Absolute çocuklar için çapa, küçük kaydırmalar
`absolute`	Hayır	En yakın konumlandırılmış ata (ya da sayfa)	Rozetler, tooltip'ler, katmanlar, kapatma butonları
`fixed`	Hayır	Viewport	Başlıklar, sohbet butonları, çerez çubukları
`sticky`	Evet	Uzaklığa ulaştığında kaydırma kapsayıcısı	Tablo başlıkları, bölüm başlıkları, kenar çubukları

position: relative

Relative konumlandırılmış bir element akıştaki yerinde kalır. Uzaklıklar nerede çizildiğini değiştirir, ama orijinal yeri ayrılmış kalır, bu yüzden çevresindeki hiçbir şey kıpırdamaz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

Kutu 2, 20px aşağıda ve 20px sağda çiziliyor ve kutu 3 ile çakışıyor, ama kutu 3 kıpırdamadı: hâlâ kutu 2'nin orijinal yeri için boşluk bırakıyor. relative tek başına bir şeyi taşımak için nadiren kullanılır; asıl işi absolute çocuklar için referans kutusu olmaktır.

Uzaklıklar ve inset

top, right, bottom ve left uzunluklar, (kapsayıcı bloğa göre) yüzdeler ve auto kabul eder. inset kısa yazımı dördünü de margin ile aynı sırada ayarlar:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Karşılıklı kenarları ayarlamak elementi esnetir: left: 0; right: 0 onu kapsayıcı blok kadar geniş yapar. Absolute bir çocukta inset: 0, bir kartı bir katmanla kaplamanın standart yoludur.

absolute ve transform ile ortalamak

top: 50%; left: 50% elementin sol üst köşesini merkeze koyar. translate(-50%, -50%) ise onu kendi boyutunun yarısı kadar geri taşır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Element akışta kalabildiğinde flexbox ve grid daha basit ortalar; div ortalama sayfası bütün yöntemleri karşılaştırıyor.

position: fixed

Fixed bir element viewport'a göre yerleştirilir ve sayfa kayarken orada kalır:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

İki püf noktası var. Fixed bir element yer kaplamaz, bu yüzden body'ye padding-top eklemezsen sabit bir başlık sayfanın üst kısmını örter. Ve herhangi bir atanın transform, filter ya da perspective değeri varsa referans kutusu viewport yerine o ata olur, bu yüzden element onunla birlikte kayar.

position: sticky

Sticky bir element uzaklığına ulaşana kadar normal şekilde kayar, sonra ebeveyninin sonu kayıp gidene kadar orada yapışık kalır. Aşağıdaki kutuyu kaydır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Her harf, bölümü görünürken kaydırma kutusunun üstüne yapışır, sonra bir sonraki tarafından itilir, çünkü sticky bir element asla ebeveyninden çıkmaz.

Sticky yapışmadığında şunları kontrol et:

Uzaklık yok. position: sticky, top, bottom, left ya da right olmadan hiçbir şey yapmaz.
overflow: hidden, auto ya da scroll değeri olan bir ata. Kaydırma kapsayıcısı o olur ve gerçekten kaymıyorsa hiçbir şey yapışmaz. Yalnızca taşmayı gizlemen gerekiyorsa overflow: clip kullan.
Sticky elementten uzun olmayan bir ebeveyn. İçinde yapışacak yer yoktur.
Onu esneten bir flex ya da grid ebeveyn. Bir flex satırında sticky kenar çubuğuna align-self: flex-start ekle.

Sık yapılan hatalar

Absolute bir elementin ebeveynine position: relative vermeyi unutmak.
Sayfa düzeni için absolute kullanmak. Absolute elementler birbirlerini ve içeriği yok sayar, bu yüzden küçük ekranlarda metinler çakışır. Düzen için flexbox ya da grid, küçük süslemeler için absolute kullan.
Static bir elementte uzaklıklar. top: 10px bir position olmadan hiçbir şey yapmaz.
Hangi elementin üstte olacağı konusunda boğuşmak. Çakışan konumlandırılmış elementler z-index ile sıralanır.
İçeriği gizleyen sabit bir başlık. Sayfaya padding ekle ya da çapa linkleri onun altına düşsün diye scroll-padding-top kullan.

Sıkça Sorulan Sorular

position: absolute ne işe yarar?

Elementi normal akıştan çıkarır (diğer elementler o yokmuş gibi davranır) ve onu kapsayıcı bloğundan, yani position değeri static olmayan en yakın atadan ölçülen top, right, bottom ve left ile yerleştirir.

Bir element ebeveynine göre absolute olarak nasıl konumlandırılır?

Ebeveyne position: relative;, çocuğa ise top: 0; right: 0; gibi uzaklıklarla birlikte position: absolute; ver. Konumlandırılmış bir ebeveyn olmadan çocuk sayfaya göre yerleşir.

relative ile absolute konum arasındaki fark nedir?

relative elementi akışta tutar ve yalnızca nerede çizildiğini kaydırır; orijinal yerini boş bırakır. absolute ise onu akıştan çıkarır ve konumlandırılmış atasına göre yerleştirir.

position: sticky neden çalışmıyor?

Genellikle üç şeyden biri: hiçbir top (ya da başka bir uzaklık) ayarlanmamıştır, bir atanın overflow: hidden ya da auto değeri vardır ve kaydırma kapsayıcısı olur, ya da sticky elementin ebeveyni elementten uzun değildir, bu yüzden yapışacak yer yoktur.

fixed ile sticky arasındaki fark nedir?

fixed akıştan çıkarılır ve viewport'a sabitlenir (bir atanın transform ya da filter değeri yoksa). sticky ise akışta kalır ve uzaklığına ulaşana kadar normal şekilde kayar, sonra ebeveyni hâlâ ekrandayken yapışır.

İlgili kavramlar