Tailwind CSS Position: absolute, relative, sticky, inset ve z-index

Beş konum türü

Tablodaki davranışlar resmî position sayfasının tanımlarıdır. Burada en önemli sütun sonuncusudur: absolute bir eleman, konumu static olmayan en yakın üst elemanı referans alır. Hiçbir üst eleman konumlandırılmamışsa referans çok daha yukarıda bir yere kayar ve öğeniz sayfanın beklenmedik bir köşesine gider. Bu yüzden absolute kullandığınız her yerde, öğenin hangi kutuya göre yerleşmesini istediğinizi düşünüp o kutuya relative vermeniz gerekir.

absolute elemanlar ayrıca normal akıştan çıkar: komşuları onlar yokmuş gibi yerleşir. Resmî sayfadaki karşılaştırma bunu bir kardeş elemanın yer değiştirmesiyle gösterir. relative ise elemanı akışta bırakır; top-2 gibi bir ofset verdiğinizde eleman kayar ama boşalan yeri komşular doldurmaz. static varsayılan değerdir ve resmî sayfaya göre ofsetleri yok sayar; çoğunlukla responsive bir önekle konumu geri almak için kullanılır.

Ofset sınıfları: top, right, bottom, left ve inset

Ofset sınıfları boşluk ölçeğini kullanır: right-4 calc(var(--spacing) * 4), yani varsayılan temada 1rem yazar. Sıfır değeri sadeleştirilir; top-0 doğrudan top: 0px üretir. inset-0 dört kenarı birden sıfırlar ve tek satırda inset: 0px yazar. inset-x-0 mantıksal inset-inline, inset-y-0 ise inset-block özelliğini yazar. İlk örnekte bir avatarın köşesine durum noktası yerleştirdik:

<div class="relative size-12">
  <img class="size-12 rounded-full" src="avatar.jpg" alt="">
  <span class="absolute -top-1 -right-1 size-3 rounded-full bg-green-500"></span>
</div>

@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
}

Kapsayıcı relative olduğu için nokta ona göre yerleşir. Negatif ofsetler (-top-1, -right-1) çarpanı eksiye çevirerek noktayı kapsayıcının biraz dışına, 0.25rem kadar taşırır ve köşeye "yapışmış" görünmesini sağlar. Resmî sayfadaki negatif örnek de aynı tekniği kullanır. var(--color-green-500) varsayılan temada oklch(72.3% 0.219 149.579) değerini taşır; renk sınıflarının ayrıntıları renk paleti ve tonlar yazısında.

Tam kaplama ve kenar şeritleri

Görsel üzerine karartma katmanı ya da tıklanabilir bir alan koymak için absolute inset-0 en kısa yazımdır. Bir kenar boyunca uzanan şerit için iki eksenden birini sabitleyip diğerini sıfırlarsınız: inset-x-0 bottom-0 alt kenar boyunca, inset-y-0 left-0 sol kenar boyunca uzanır. Resmî sayfa bu kombinasyonların dokuzunu bir ızgara üzerinde gösterir.

<div class="relative h-64">
  <img class="size-full" src="kapak.jpg" alt="">
  <div class="absolute inset-0 bg-black/50"></div>
  <p class="absolute inset-x-0 bottom-0 p-4">Başlık</p>
</div>

@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-x-0 {
    inset-inline: 0px;
  }
  .bottom-0 {
    bottom: 0px;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  /* (kısaltıldı) */
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

Karartma katmanı inset-0 ile kapsayıcının tamamını kaplar; yarı saydam arka planı bg-black/50 verir (bu sınıfın ürettiği color-mix() kuralını renk opaklığı yazısında inceledik). Başlık ise inset-x-0 bottom-0 ile alt kenar boyunca tam genişlikte uzanır. İki öğe de HTML'de görselden sonra geldiği için görselin üzerinde görünür; sırayı açıkça kontrol etmek istediğinizde z-* sınıflarına geçersiniz.

Kesirler, full ve keyfi değerler

Ofsetler kesir de kabul eder ve kesirler genişlikte olduğu gibi yüzdeye çevrilir: left-1/2 left: calc(1 / 2 * 100%) yazar. top-full top: 100% üretir ve bir açılır menüyü tetikleyici düğmenin hemen altına koymak için işe yarar. Ölçekte olmayan değerler için resmî sayfa inset-[3px] ve top-[...] gibi keyfi yazımı, değişken için inset-(--my-position) kısaltmasını gösterir. inset-px ise dört kenara 1px yazar.

Ortalama, sticky ve fixed bir arada

<header class="sticky top-0 z-50 bg-white">Üst bar</header>
<button class="fixed right-4 bottom-4 z-40">Yardım</button>
<div class="absolute top-1/2 left-1/2 -translate-1/2">Orta</div>

@layer utilities {
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: 0px;
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .-translate-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .bg-white {
    background-color: var(--color-white);
  }
}

Bu derlemede üç ayrı kalıp var. Üst bar sticky top-0 ile sayfa kaydırıldığında üst kenara yapışır. Resmî sayfaya göre sticky bir eleman belirlediğiniz eşiği geçene kadar relative gibi davranır, sonra üst elemanı ekrandan çıkana kadar fixed gibi davranır. Buradaki eşik top-0 sınıfıdır; ofset vermezseniz yapışacağı bir sınır olmaz. Ayrıca sticky eleman yalnızca kendi üst elemanının sınırları içinde yapışık kalır: başlığı kısa bir sarmalayıcının içine koyarsanız sarmalayıcı ekrandan çıkınca başlık da onunla gider. bg-white ise altından geçen içeriğin görünmemesi için gereklidir.

Yardım düğmesi fixed right-4 bottom-4 ile görünüm alanının sağ alt köşesinde, kenarlardan 1rem içeride sabit durur ve sayfa kaydığında yerinden oynamaz. Ortadaki kutu ise klasik ortalama yöntemidir: top-1/2 left-1/2 kutunun sol üst köşesini kapsayıcının merkezine götürür, -translate-1/2 kutuyu kendi boyutunun yarısı kadar geri çekerek tam ortaya oturtur. Bu yöntemin ve diğer ortalama tekniklerinin karşılaştırması div ortalama yazısında, translate sınıflarının kendisi transform: scale, rotate, translate yazısında.

Sticky başlık, kenar çubuğu ve alt bilginin bir sayfa iskeletinde birlikte nasıl kullanılacağını sayfa düzeni: header, sidebar, footer yazısında adım adım kurduk.

z-index sınıfları

z-* sınıfları üst üste binen elemanların hangisinin önde görüneceğini belirler. Resmî sayfadaki örnek z-0, z-10, z-20, z-30, z-40 ve z-50 değerlerini kullanır; ancak v4.3.5 ile yaptığımız denemede bu değerler bir listeyle sınırlı değildi: z-999 de doğrudan z-index: 999 üretti. Negatif değer için önek eksi kullanılır ve -z-10, z-index: calc(10 * -1) yazar. z-auto z-index: auto üretir. Keyfi değer için z-[100] de çalışır, ancak canonicalize komutu bunu z-100 olarak sadeleştirdi; yani sayısal bir değer için köşeli paranteze gerek yoktur.

z-index yalnızca konumlandırılmış elemanlarda (ve flex ya da grid öğelerinde) etkilidir; static bir elemana z-50 vermek genellikle hiçbir şeyi değiştirmez. İkinci önemli kural, katmanların bir istifleme bağlamı içinde karşılaştırılmasıdır: z-10 verilmiş bir kapsayıcının içindeki z-50 çocuk, kapsayıcının dışındaki z-20 bir elemanın önüne geçemez. "z-index'i 9999 yaptım hâlâ arkada" sorununun çoğu buradan çıkar. Projede kullanılacak birkaç katmanı (içerik, açılır menü, üst bar, modal gibi) baştan belirlemek bu karmaşayı azaltır. Örneğin açılır menülere z-10, sabit üst bara z-40, modal pencere ve arka planına z-50 vermek gibi küçük bir sözleşme, ekipteki herkesin hangi değeri seçeceğini tahmin etmesini kolaylaştırır. Bu değerler bir öneri değil, yalnızca bir düzen örneğidir; önemli olan tutarlılıktır.

Çalışan bir örnek: mobilde akışta, masaüstünde açılır menü

Konum sınıflarının responsive öneklerle birleşmesi, aynı HTML'i iki farklı davranışa sokmanın en kısa yoludur. Aşağıdaki hesap menüsü mobilde düğmenin altında normal akışta, sayfanın bir parçası gibi görünür. Orta ekrandan itibaren ise düğmenin altına açılan, sağ kenara hizalı, sabit genişlikte bir açılır kutuya dönüşür:

<div class="relative inline-block">
  <button>Hesabım</button>
  <ul class="static md:absolute md:top-full md:right-0 md:z-10 md:mt-2 md:w-48">
    <li>Profil</li>
    <li>Çıkış</li>
  </ul>
</div>

@layer utilities {
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inline-block {
    display: inline-block;
  }
  @media (width >= 48rem) {
    .md\:absolute {
      position: absolute;
    }
    .md\:top-full {
      top: 100%;
    }
    .md\:right-0 {
      right: 0px;
    }
    .md\:z-10 {
      z-index: 10;
    }
    .md\:mt-2 {
      margin-top: calc(var(--spacing) * 2);
    }
    .md\:w-48 {
      width: calc(var(--spacing) * 48);
    }
  }
}

Derlenen CSS'i adım adım okuyalım. Sarmalayıcı her ekran boyutunda relative ve inline-block olduğu için hem düğmenin genişliğine göre daralıyor hem de içindeki mutlak konumlu liste için referans kutusu oluyor. Liste mobilde static, yani normal akışta; ofsetler zaten md: önekli olduğu için küçük ekranda hiçbiri üretilen kurala girmiyor. 48rem ve üstünde liste absolute oluyor, top-full ile sarmalayıcının hemen altına (üst kenarı sarmalayıcının yüksekliğinin yüzde yüzü kadar aşağıya), right-0 ile sağ kenara yerleşiyor. mt-2 düğmeyle menü arasına 0.5rem boşluk bırakıyor, w-48 menüye 12rem genişlik veriyor, z-10 de altındaki içeriğin önünde kalmasını sağlıyor.

Bu örnekte static sınıfını aslında yazmasak da sonuç değişmezdi, çünkü varsayılan konum zaten static'tir. Yine de yazmak sınıf listesini okuyan kişiye mobildeki niyeti gösterir. Ofsetleri, genişliği ve katmanı da yalnızca masaüstünde anlam taşıdıkları için md: önekiyle yazdık; resmî responsive sayfası md:shrink-0 örneğinde aynı yaklaşımı önerir: bir sınıf yalnızca belirli bir ekranda önem taşıyorsa bunu sınıf adında açıkça belirtmek. Açılır menünün tıklamayla açılıp kapanması JavaScript ya da durum varyantları gerektirir; hover ve focus ile görünürlük değiştirmenin yolları group ve peer kullanımı yazısında anlatılıyor.

Mantıksal ofsetler: inset-s ve inset-e

Sol ve sağ yerine metnin başlangıç ve bitiş tarafını hedeflemek için inset-s-* ve inset-e-* vardır; sırasıyla inset-inline-start ve inset-inline-end yazarlar. Soldan sağa bir sayfada inset-s-0 sol kenara yapışır, dir="rtl" bir kapsayıcıda sağ kenara geçer. Dikey eksende inset-bs-* ve inset-be-* sınıfları da listelenir. Eski kodlarda start-0 ve end-4 gibi yazımlar görebilirsiniz; bunlar v4.3.5 ile hâlâ derleniyor, ancak canonicalize komutu bunları inset-s-0 ve inset-e-4 olarak önerdi.

Sık yapılan hatalar

• Referanssız absolute: üst elemana relative vermeyi unutursanız öğe konumlandırılmış ilk üst elemana, o da yoksa sayfanın başlangıcına göre yerleşir.
• Ofsetsiz sticky: top-0 gibi bir eşik olmadan eleman yapışmaz.
• Kısa sarmalayıcı içinde sticky: eleman yalnızca üst elemanının sınırları içinde yapışık kalır.
• Taşmayı gizleyen kapsayıcı: kapsayıcıda overflow-hidden varsa dışarı taşan -top-1 rozeti kesilir. Taşma davranışı overflow ve scroll snap yazısında.
• Gittikçe büyüyen z-index: değeri artırmak istifleme bağlamı sorununu çözmez; kapsayıcıların katmanlarını kontrol edin.
• Ölçekte olmayan değeri sınıf adına yazmak: top-[50%] çalışır ama top-1/2 aynı işi ölçekle yapar.

Sık Sorulan Sorular

absolute eleman neden yanlış yerde duruyor?

absolute eleman, konumu static olmayan en yakın üst elemana göre yerleşir. Hangi kutunun referans olmasını istiyorsanız ona relative verin ve aradaki diğer üst elemanların konumlandırılmış olup olmadığını kontrol edin.

inset-0 ile top-0 left-0 right-0 bottom-0 aynı mı?

Evet. inset-0 tek satırda inset: 0px yazar; dört ayrı sınıf aynı sonucu verir. canonicalize komutu da bu dört sınıflık grubu inset-0 olarak sadeleştirdi.

Sticky header neden yapışmıyor?

En sık üç neden: top-0 gibi bir ofset verilmemiştir, başlık kısa bir sarmalayıcının içindedir, ya da bir üst elemanda kaydırmayı değiştiren bir overflow ayarı vardır. Önce ofseti, sonra başlığın doğrudan üst elemanını kontrol edin.

fixed ile sticky arasındaki fark nedir?

fixed eleman normal akıştan çıkar ve her zaman görünüm alanına göre yerleşir; sayfa ne kadar kaydırılırsa kaydırılsın aynı yerde kalır ve kapladığı yer boşalır. sticky eleman ise eşiğe ulaşana kadar akışta normal bir eleman gibi durur, yerini korur ve yalnızca kendi üst elemanı ekranda olduğu sürece yapışık kalır. Sayfanın en üstündeki bir başlık için sticky top-0 çoğu zaman daha az ayar ister, çünkü altındaki içeriğe ayrıca boşluk vermeniz gerekmez.

relative ile ofset vermek margin vermekten nasıl farklı?

relative top-2 elemanı görsel olarak 0.5rem aşağı kaydırır ama akıştaki yeri değişmez; komşular eleman hiç kaymamış gibi yerleşir. mt-2 ise elemanın üstüne düzende gerçek bir boşluk ekler; eleman aşağı inerken altındaki komşuları da kendisiyle birlikte iter. Küçük bir görsel düzeltme için ofset, düzende gerçek bir boşluk için margin kullanın.

Konumu ekran boyutuna göre değiştirebilir miyim?

Evet. Resmî sayfadaki relative md:absolute ve top-4 md:top-6 örneklerinde olduğu gibi konum ve ofset sınıfları responsive öneklerle birleşir.

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: Tailwind öğrenme rehberi · div ortalama · sayfa düzeni · transform sınıfları · display sınıfları · overflow ve scroll snap