CSS position: relative, absolute, fixed ve sticky Rehberi

Beş değer bir bakışta

MDN, position değeri static dışında olan her öğeye konumlandırılmış öğe (positioned element) der. Bu tanım önemlidir, çünkü absolute öğeler kendilerini en yakın konumlandırılmış ataya göre yerleştirir ve z-index de (flex ve grid öğeleri dışında) yalnızca konumlandırılmış öğelerde çalışır.

static ve relative

static varsayılan değerdir: Öğe normal akışta durur ve top, right, bottom, left ile z-index özelliklerinin hiçbir etkisi olmaz. Bir öğeye top: 20px yazdığınız halde hiçbir şey olmuyorsa ilk bakacağınız yer burasıdır.

relative değerinde öğe önce normal akışa göre yerleştirilir, sonra kendi konumuna göre kaydırılır. Kritik ayrıntı şudur: Kaydırma diğer öğeleri etkilemez. Sayfa, öğe sanki static imiş gibi eski yerini korur; öğe yalnızca görsel olarak kayar ve komşularının üzerine binebilir.

.kutu {
  display: inline-block;
  width: 100px;
  height: 100px;
}

#iki {
  position: relative;
  top: 20px;
  left: 20px;
  /* 20px aşağı ve 20px sağa kayar;
     diğer kutular onun eski yerini boş bırakır */
}

Bu örnek MDN'nin position sayfasındaki göreli konumlandırma örneğinden uyarlandı. relative değerinin günlük kullanımdaki asıl görevi çoğu zaman öğeyi kaydırmak değil, içindeki absolute öğelere bir içeren blok sağlamaktır. Bunu aşağıdaki uygulamalı örnekte göreceğiz.

absolute: akıştan çıkmak

absolute değerinde öğe normal belge akışından çıkarılır ve sayfa düzeninde onun için yer ayrılmaz; diğer öğeler sanki o yokmuş gibi dizilir. Öğe, en yakın konumlandırılmış atasına göre yerleşir. Böyle bir ata yoksa ilk içeren bloğa (initial containing block, kök öğenin içeren bloğu) göre yerleşir. Son konumu top, right, bottom ve left belirler; öğenin margin'leri varsa bunlar kaydırma değerine eklenir.

MDN, mutlak konumlu öğeler hakkında üç ayrıntı daha verir. Birincisi, margin'leri başka margin'lerle çökmez. İkincisi, içerikleri için yeni bir blok biçimlendirme bağlamı oluştururlar. Üçüncüsü, width ve height değeri auto olduğunda çoğu zaman içeriklerine sığacak kadar boyutlanırlar. Ancak yerine konmayan bir mutlak öğeye hem top hem bottom verip height değerini auto bırakırsanız öğe kullanılabilir dikey alanı doldurur; aynısı left ve right ile genişlik için de geçerlidir.

.katman {
  position: absolute;
  inset: 0;
  /* top, right, bottom, left hepsi 0; width ve height auto:
     öğe içeren bloğun tamamını kaplar */
  background: rgb(0 0 0 / 50%);
}

Bu doldurma durumu dışında çakışan değerler için MDN iki kural verir: Hem top hem bottom belirtilmişse (yani ikisi de auto değilse) top kazanır. Hem left hem right belirtilmişse yazı yönü ltr olduğunda left, rtl olduğunda right kazanır.

fixed: görüntü alanına sabitlemek

fixed da öğeyi akıştan çıkarır ve onun için yer ayırmaz. Fark, içeren bloğun ilk içeren blok olmasıdır; ekranda bu görüntü alanı (viewport) demektir. Böylece öğe sayfa kaydırılsa da aynı yerde kalır. MDN iki ek bilgi verir: fixed her zaman yeni bir stacking context oluşturur ve basılı belgelerde öğe her sayfada aynı konuma yerleştirilir.

.sarmalayici {
  transform: translateX(0);
  /* none dışında bir değer: içindeki fixed öğelerin
     içeren bloğu artık bu öğe olur */
}

.sarmalayici .bildirim {
  position: fixed;
  top: 80px;
  left: 10px;
  /* görüntü alanına değil .sarmalayici kutusuna göre yerleşir */
}

sticky: eşiğe yapışmak

sticky öğe normal akışta yerleşir ve eski yerini korur. Kaydırma sırasında içeren bloğu belirttiğiniz eşiği geçene kadar göreli konumlu gibi davranır; eşik geçildiğinde "yapışır" ve içeren bloğunun karşı kenarına ulaşana kadar orada kalır. MDN'nin en basit örneği şudur:

#bir {
  position: sticky;
  top: 10px;
  /* görüntü alanının üstüne 10px kalana kadar normal akar,
     sonra üstten 10px uzakta sabit kalır */
}

sticky değerinin beklendiği gibi çalışmadığı iki tipik durum vardır ve ikisi de MDN'de açıkça yazılıdır:

• Eşik verilmemesi: Yapışmanın istendiği eksende en az bir inset özelliğinin (top, inset-block-start, right, inset-inline-end gibi) auto dışında bir değeri olmalıdır. Bir eksendeki iki inset de auto ise öğe o eksende relative gibi davranır ve göreli konumlandırmadan ayırt edilemez.
• Beklenmedik kaydırma atası: Yapışkan öğe, "kaydırma mekanizması" olan en yakın atasına yapışır. Bu mekanizma overflow değeri hidden, scroll, auto ya da overlay olduğunda oluşur; o ata gerçekte kaymıyor olsa bile. Yani bir üst sarmalayıcıya taşmayı gizlemek için verdiğiniz overflow: hidden, yapışkan başlığın görüntü alanına göre yapışmasını engelleyebilir.

MDN'nin alfabetik liste örneği yapışkan konumlandırmanın tipik kullanımını gösterir: "A" harfi altındaki öğeler kaydırılıp ekrandan çıkarken "B" başlığı görüntü alanının üstüne yapışır, "B" öğeleri bitince yerini "C" başlığı alır. Bunun için her başlığa position: sticky ve top değeri vermek yeterlidir. Yapışkan öğenin hareket alanı içeren bloğuyla sınırlı olduğu için her başlık yalnızca kendi bölümü boyunca yapışık kalır.

dt {
  position: sticky;
  top: 0;
  /* her harf başlığı kendi grubu kaydırılırken üstte kalır */
  background: #b8c1c8;
}

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
  </div>
</dl>

inset kısayolu

inset, top, right, bottom ve left özelliklerinin kısayoludur ve margin kısayoluyla aynı çok değerli sözdizimini kullanır: bir değer dört kenara, iki değer üst-alt ve sol-sağa, üç değer üst, sol-sağ ve alta, dört değer saat yönünde üst, sağ, alt ve sola uygulanır. Yüzdeler sol ve sağ için içeren bloğun genişliğine, üst ve alt için yüksekliğine göre hesaplanır.

MDN iki noktaya dikkat çeker. Birincisi, inset özellikleri konumlandırılmamış öğelerde hiçbir etki yapmaz. İkincisi, inset mantıksal özellikler modülünde tanımlı olsa da mantıksal değil fiziksel kaydırma tanımlar; yazı yönünden bağımsız olarak üst, sağ, alt ve sol kenarlara karşılık gelir. Yazı yönüne göre çalışan karşılıklar inset-block-start, inset-inline-start gibi özelliklerdir.

.etiket {
  position: absolute;
  inset: 20px 40px 30px 10px;
  /* üst 20px, sağ 40px, alt 30px, sol 10px */
}

İçeren blok nasıl belirlenir?

MDN'nin içeren blok rehberi, bir öğenin içeren bloğunu bulma işleminin tamamen position değerine bağlı olduğunu söyler ve dört kural verir:

• static, relative ya da sticky: İçeren blok, blok kapsayıcı olan (blok, inline-block, liste maddesi) ya da biçimlendirme bağlamı oluşturan (tablo, flex, grid kapsayıcısı) en yakın atanın içerik kutusunun kenarıdır.
• absolute: İçeren blok, position değeri static olmayan en yakın atanın padding kutusunun kenarıdır.
• fixed: İçeren blok, sürekli ortamda görüntü alanı, sayfalı ortamda sayfa alanıdır.
• absolute ya da fixed için ek durum: İçeren blok; filter, backdrop-filter, transform, perspective, rotate, scale ya da translate değeri none olmayan, contain değeri layout, paint, strict ya da content olan, bu özelliklerden birini içeren will-change değeri olan veya content-visibility: auto verilmiş en yakın atanın padding kutusu da olabilir.

Yüzde hesapları da içeren bloğa göre yapılır: height, top ve bottom yüzdeleri içeren bloğun yüksekliğinden; width, left, right, padding ve margin yüzdeleri ise genişliğinden hesaplanır. Rehberdeki örnekte mutlak konumlu bir <section> 400 x 160 piksel boyutunda ve padding: 30px 20px değerindedir; içindeki mutlak konumlu paragrafın hesapları padding kutusuna göre yapılır.

section {
  position: absolute;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
}

p {
  position: absolute;
  width: 50%;   /* (400 + 20 + 20) * 0.5  = 220px */
  height: 25%;  /* (160 + 30 + 30) * 0.25 = 55px */
  margin: 5%;   /* (400 + 20 + 20) * 0.05 = 22px */
  padding: 5%;  /* (400 + 20 + 20) * 0.05 = 22px */
}

Dikkat edin: margin ve padding yüzdeleri dikey kenarlarda da genişlikten (440 piksel) hesaplanır, bu yüzden dört kenarda da 22 piksel olur. Aynı paragraf static olsaydı içeren blok <section> öğesinin içerik kutusu olurdu ve hesaplar 400 ve 160 piksel üzerinden yapılırdı.

Uygulamalı mini örnek: kart köşesinde rozet

Bir ürün kartının sağ üst köşesine "Yeni" rozeti yerleştirmek konumlandırmanın en klasik kullanımıdır. Kart relative olur ve hiç kaydırılmaz; tek görevi rozet için içeren blok oluşturmaktır.

.kart {
  position: relative;
  /* kaydırma yok; yalnızca içeren blok oluşturur */
  width: 280px;
  padding: 16px;
  border: 1px solid #ccc;
}

.kart .rozet {
  position: absolute;
  top: 8px;
  right: 8px;
  /* kartın padding kutusunun sağ üst köşesinden 8px içeride */
  padding: 2px 8px;
  background: crimson;
  color: white;
}

<article class="kart">
  <span class="rozet">Yeni</span>
  <h3>Ürün adı</h3>
  <p>Açıklama</p>
</article>

Karttaki position: relative satırını silerseniz rozet en yakın konumlandırılmış ataya, yoksa ilk içeren bloğa göre yerleşir ve sayfanın sağ üst köşesine kaçar. Ayrıca rozet akıştan çıktığı için başlık ve açıklama onun için yer bırakmaz; rozet metnin üstüne binebilir. MDN de konumlandırmayla akıştan çıkarılan öğelerde içerik çakışmalarını yönetmeniz gerektiğini vurgular. Bu kalıbı inset ile ortalamak için CSS ortalama yöntemleri yazısına, konumu bir başka öğeye bağlamak için anchor positioning yazısına bakabilirsiniz.

Erişilebilirlik ve performans

MDN, absolute ya da fixed ile konumlandırılan öğelerin, sayfa metin boyutunu büyütmek için yakınlaştırıldığında diğer içeriği örtmemesine dikkat edilmesini ister. Ayrıca fixed ya da sticky içerik barındıran kaydırılan alanların performans ve erişilebilirlik sorunlarına yol açabileceğini belirtir: Kullanıcı kaydırdıkça tarayıcı bu içeriği yeni konumunda yeniden boyamak zorundadır ve cihaza göre bu akıcı olmayabilir. MDN'nin önerdiği çözümlerden biri, konumlandırılmış öğeye will-change: transform vererek onun kendi katmanında çizilmesini sağlamaktır. Bunun da fixed alt öğeler için yeni bir içeren blok oluşturduğunu unutmayın.

Sık yapılan hatalar

• static öğeye top ya da z-index vermek: Etkisi yoktur; önce position değerini değiştirin.
• absolute öğenin ebeveynini konumlandırmayı unutmak: Öğe beklediğiniz kutuya değil, daha yukarıdaki bir ataya ya da ilk içeren bloğa göre yerleşir.
• sticky öğeye eşik vermemek: top gibi bir inset değeri olmadan öğe relative gibi davranır.
• sticky öğenin atasında overflow: hidden: Öğe o ataya yapışır; görüntü alanına göre yapışmaz.
• transform verilmiş bir ata içinde fixed: Öğe görüntü alanı yerine o ataya göre yerleşir ve sayfayla birlikte kayar.
• Yüzdelerin her zaman ebeveynin içerik kutusundan hesaplandığını sanmak: absolute öğede hesap, konumlandırılmış atanın padding kutusuna göre yapılır.

Sık Sorulan Sorular

position: relative ile absolute arasındaki fark nedir?

relative öğe normal akışta kalır, eski yerini korur ve kendi konumuna göre kayar. absolute öğe akıştan çıkar, yer kaplamaz ve en yakın konumlandırılmış ataya göre yerleşir.

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

En sık iki neden: Yapışma ekseninde top gibi bir eşik değeri verilmemesi ve atalardan birinde overflow değerinin hidden, scroll ya da auto olması. İkinci durumda öğe o ataya yapışır. Ayrıca yapışkan öğe yalnızca kendi içeren bloğu boyunca yapışık kalır.

fixed öğe neden sayfayla birlikte kayıyor?

Büyük ihtimalle atalarından birinde transform, perspective, filter ya da benzeri bir değer vardır ve o ata içeren blok olmuştur. Geliştirici araçlarında ataları yukarı doğru inceleyerek bu özelliği arayın.

inset mantıksal bir özellik mi?

Hayır. MDN'ye göre inset mantıksal özellikler modülünde tanımlı olsa da fiziksel kaydırma belirler. Yazı yönüne göre değişen kaydırma için inset-inline-start ve inset-block-start gibi özellikleri kullanın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · z-index ve stacking context · overflow ve kaydırma · display değerleri · Anchor positioning · Ortalama yöntemleri · transform fonksiyonları