İçindekiler
Mimari ve Sanal Yapılar

CSS Position Özelliği

Position, CSS'te öğelerin yerleştirilmesini sağlayan önemli bir özelliktir. Bu sayfa içerisinde CSS'te kullanılan position hakkında detaylı bilgi verilmektedir.

Ana Konu
Seviye 5

CSS Position Özelliği Akışı Kırmak ve Koordinatları Yönetmek

Temel Mekanizma: Normal Akış ve Kopuş

Web sayfalarının doğasında, yerçekimine benzer görünmez bir kural vardır; buna Normal Akış denir.

Blok elemanlar (<div>, <p>) yukarıdan aşağıya doğru bir şelale gibi dökülürken, satır içi elemanlar (<span>) soldan sağa doğru akar.

position özelliği, işte bu yerçekimi kurallarına meydan okumanızı sağlayan yegane araçtır.

Bir öğeye konumlandırma uyguladığınızda, top, right, bottom ve left gibi yön komutlarını kullanma yeteneğinin kilidini açarsınız.

Position sistemi tek başına bir özellik değildir; üç temel kavramın birleşimidir: Akış, Referans ve Katman.

Bir öğenin neden beklediğiniz yerde durmadığını anlamak için bu üçlü sistemin birlikte nasıl çalıştığını çözmeniz gerekir.

Normal akış çoğu durumda yeterlidir; ancak modern arayüzlerde üst üste binme, sabitlenme veya bağımsız hareket etme gibi ihtiyaçlar doğar.

Position özelliği, bu noktada devreye girerek geliştiriciye akışı bozma ve kendi koordinat sistemini kurma gücü verir.

Varsayılan Durum: Static (Durgun) Tüm HTML öğeleri varsayılan olarak position: static değerine sahiptir.

Bu durumda öğe, sayfanın doğal akışına itaat eder.

Static bir öğeye top: 50px gibi bir komut verseniz bile, tarayıcı bunu görmezden gelir; çünkü durgun öğelerin koordinatları değiştirilemez.

Göreceli Hareket: Relative position: relative, konumlandırmanın en kafa karıştırıcı ama en stratejik adımıdır.

Bir öğeyi "relative" yaptığınızda, o öğe hala normal akışın bir parçasıdır; ancak artık kendi orijinal konumuna göre hareket edebilir.

Hayalet Boşluk Kuralı Relative ile bir öğeyi sağa veya aşağıya kaydırdığınızda, öğe görsel olarak hareket eder ancak ruhu geride kalır.

Tarayıcı, öğenin ilk bulunduğu yeri sanki öğe hala oradaymış gibi rezerve eder ve boş bırakır.

Bu sayede, kaydırılan öğe diğer içerikleri itmez veya düzeni bozmaz; sadece görsel bir illüzyon gibi başka bir yerde belirir.

Mutlak Özgürlük: Absolute position: absolute, öğeyi belge akışından tamamen koparır.

Artık o öğe için yerçekimi yoktur. Diğer HTML öğeleri, absolute olan öğe hiç var olmamış gibi davranır ve onun kapladığı alanın üzerine yerleşirler.

Bu durum, öğelerin üst üste binmesine olanak tanır.

Bu mekanizma anlaşılmadığında, absolute öğelerin "rastgele" yerlere gitmesi gibi görünen hatalar oluşur.

Aslında bu bir hata değil, sadece referans noktasının yanlış belirlenmesidir.

Referans Ebeveyn Arayışı Absolute bir öğe, nereye göre konumlanacağını bilmek ister.

Tarayıcı, bu öğenin kapsayıcılarına (parent elements) bakar ve position değeri static olmayan ilk ebeveyni arar.

Eğer böyle bir ebeveyn bulamazsa, referans noktası olarak tarayıcı penceresini ( <body> ) kabul eder.

Bu yüzden genellikle, absolute kullanacağımız öğenin ebeveynine sınırları belirlemek için position: relative veririz.

Sabit ve Yapışkan Düzenler Modern web tasarımlarında menüleri veya reklamları sabitlemek için iki güçlü değer daha vardır.

Fixed ve Sticky seçiminde temel fark şudur: biri tüm ekranı referans alırken, diğeri ebeveyn sınırlarına bağlı kalır.

Ekrana Çivilemek: Fixed position: fixed, öğeyi doğrudan Viewport'a göre konumlandırır.

Sayfayı aşağıya kaydırsanız bile, bu öğe ekranın belirlediğiniz köşesinde asılı kalır.

"Yukarı Çık" butonları veya sabit üst menüler genellikle bu teknikle yapılır.

Akıllı Geçiş: Sticky position: sticky, relative ve fixed özelliklerinin bir hibritidir.

Öğe, belirli bir kaydırma noktasına gelene kadar normal akışta davranır.

Ancak kaydırma işlemi belirlenen eşiği ( threshold ) geçtiğinde, öğe aniden fixed davranışı göstererek ekrana yapışır.

Debug Perspektifi Bir öğe beklediğiniz yerde değilse, ilk sorulması gereken soru şudur: "Bu öğe akışın içinde mi yoksa dışında mı?"

İkinci adım ise referans noktasını bulmaktır: "Bu öğe kime göre konumlanıyor?"

Position Sistemini Anlamak

Position konusunu öğrenmenin anahtarı, değerleri ezberlemek değil, her öğe için şu üç soruyu sormaktır:

  • Bu öğe akışın içinde mi dışında mı?
  • Hangi referans noktasına göre konumlanıyor?
  • Diğer öğelerle hangi katmanda (z-index) yer alıyor?

Bu üç soruya cevap verebilen bir geliştirici için, position artık karmaşık değil tamamen kontrol edilebilir bir sistemdir.

Seviye 5

Statik Konumlandırma (Static) Varsayılan Yerçekimi ve Doğal Akış

Doğal Durum: Her Şeyin Başlangıcı

position: static, HTML dünyasının fabrika ayarıdır.

Siz aksini belirtmediğiniz sürece, sayfadaki her bir öğe bu kimlikle doğar.

Bu modda öğeler, HTML kodundaki yazım sırasına sadık kalarak, Normal Akış kuralları çerçevesinde yukarıdan aşağıya ( bloklar ) veya soldan sağa ( satır içiler ) dizilirler.

Statik bir öğe, "Ben buradayım çünkü sıram geldi" der ve ekstra bir koordinat talep etmez.

Sağır Kulaklar Kuralı (Ofset Duyarsızlığı) Statik konumlandırmanın en belirleyici teknik özelliği, yön komutlarına karşı bağışık olmasıdır.

Bir öğe statik ise; ona top, left, right veya bottom değerleri verseniz bile, tarayıcı bunları tamamen yoksayar.

Onu hareket ettirmenin tek yolu, doğal akışın araçları olan margin veya transform özelliklerini kullanmaktır.

Derinlik Algısının Yokluğu (Z-Index)

Konumlandırma sadece x ve y ekseninde değil, z ekseninde (derinlik) de önemlidir.

Ancak position: static kullanan bir öğe, derinlik yarışına katılamaz.

Bu öğelere z-index değeri verilemez. Eğer bir öğeyi diğerinin üzerine çıkarmak istiyorsanız, statik zincirini kırmak zorundasınız.

Ebeveyn Olma Yetersizliği Bu, yeni başlayanların en sık yaptığı hatalardan biridir.

İçine position: absolute olan bir çocuk öğe koyduğunuzda, çocuk öğe referans alacağı bir ebeveyn arar.

Ancak ebeveyn static ise, çocuk onu görmezden gelir ve bir üstteki ebeveyne bakar. Statik öğeler, konumlandırma bağlamında

Referans Noktası (Containing Block) olamazlar.

Neden Kullanırız? (Sıfırlama Gücü)

"Zaten varsayılan buysa neden elimizle yazalım?" diyebilirsiniz.

Özellikle Responsive Tasarım yaparken, masaüstünde absolute olan bir menüyü, mobilde normal akışa sokmak isteyebilirsiniz.

İşte bu noktada position: static, önceki güçlü kuralları iptal eden bir sıfırlama butonu görevi görür.

Varsayılan Durum: Static (Durgun) Tüm HTML öğeleri varsayılan olarak position: static değerine sahiptir.

Static değeri çoğu zaman göz ardı edilir; ancak aslında tüm konumlandırma sisteminin başlangıç noktasıdır.

Çünkü diğer tüm position değerleri, bu varsayılan davranışı değiştirerek çalışır.

Bu durumda öğe, sayfanın doğal akışına itaat eder.

Static bir öğeye top: 50px gibi bir komut verseniz bile, tarayıcı bunu görmezden gelir; çünkü durgun öğelerin koordinatları değiştirilemez.

Bunun nedeni, static öğelerin herhangi bir koordinat sistemine dahil olmamasıdır.

Yani tarayıcı, bu öğeler için konum hesaplaması yapmaz, sadece akış kurallarına göre yerleştirir.

Sistemdeki Rolü Static, konumlandırmanın "yokluğu" değil, aslında akışın saf halidir.

Bu yüzden bir öğenin neden hareket etmediğini anlamak için, onun hala static durumda olup olmadığını kontrol etmek gerekir.

Debug Perspektifi Eğer verdiğiniz top, left gibi değerler çalışmıyorsa, ilk kontrol edilmesi gereken şey öğenin hala position: static olup olmadığıdır.

Çoğu konumlandırma hatası, aslında bu basit durumun gözden kaçırılmasından kaynaklanır.

Static, akışa tamamen bağlıdır ve kontrol imkanı sunmaz.

Bu sınırlamayı aşmak ve koordinat kontrolünü elde etmek için, bir sonraki adım olan relative devreye girer.

</>
Statik (Varsayılan) vs. Relatif Karşılaştırması Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statik (Varsayılan) vs. Relatif Karşılaştırması Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="konum-testi">

        <div class="kutu statik">
            Statik: top/left beni etkilemez.
        </div>

        <div class="kutu relatif">
            Relatif: Koordinatlara uyarım.
        </div>

    </div>
</body>

</html>
.konum-testi {
    padding: 20px;
    background-color: #f0f0f0;
    font-family: sans-serif;
}

.kutu {
    width: 250px;
    padding: 20px;
    color: white;
    margin-bottom: 10px;
    border-radius: 8px;
}

.statik {
    position: static;
    background-color: #34495e;
    top: 50px;
    left: 50px;
}

.relatif {
    position: relative;
    background-color: #e67e22;
    top: 20px;
    left: 40px;
}
Seviye 5

Relatif Konumlandırma (Relative) Kendine Göre Hareket ve Sınır Çizmek

Benlik Referansı: "Nerdeysem Oradan Başla"

position: relative, bir öğeyi Normal Akış'tan koparmaz, sadece ona esneklik kazandırır.

Relative, konumlandırmanın ilk kontrol seviyesidir; öğe hala akışın içindedir ancak artık kontrollü bir şekilde sapma yapabilir.

Tarayıcıya şu emri verirsiniz: "Bu öğeyi normalde koyacağın yere koy, ama sonra benim vereceğim koordinatlarla ötele."

Burada referans noktası tarayıcı penceresi değil, öğenin kendi varsayılan pozisyonudur.

Görsel İllüzyon: Hayalet Boşluk (Ghost Space) Relative bir öğeyi top: 50px ile aşağı ittiğinizde, öğe görsel olarak aşağı iner.

Bu davranış, relative öğenin akıştan çıkmadığını gösterir; sadece görsel olarak yer değiştirir.

Ancak teknik olarak, öğenin ruhu ( kapladığı alan ) yukarıda, eski yerinde kalır.

Tersine İtme Mantığı (Offset Logic)

Konumlandırma değerleri (top, left...) bir "gitme" komutu değil, bir "itme" komutudur.

left: 20px dediğinizde, öğe sola gitmez; soldan 20px itilerek sağa doğru kayar.

bottom: 10px dediğinizde, aşağıdan 10px itilerek yukarı çıkar, bu ters mantık, relative kullanımının temelidir.

Bu ters mantık anlaşılmadığında, öğenin neden beklenenin ters yönüne hareket ettiği karıştırılır.

Süper Güç: Ebeveyn Olma (Anchor Point) Relative'in belki de en sık kullanılan özelliği, kendisini hareket ettirmek değil, çocuklarına sınır çizmektir.

Bir kutuya position: relative verdiğinizde, ( hareket ettirmeseniz bile ) o kutu artık içindeki position: absolute olan çocuklar için yeni bir referans dünyası olur.

Bunu yapmazsanız, absolute olan çocuklar ebeveyni tanımaz ve sayfanın en tepesine kaçarlar.

Katman Yönetimi (Z-Index) Statik öğelerin aksine, relative öğeler derinlik algısına sahiptir.

z-index kullanarak bu öğeyi diğer nesnelerin önüne çıkarabilir veya arkasına gizleyebilirsiniz.

Bu özellik, öğelerin sadece yatay ve dikey değil, aynı zamanda z ekseninde de kontrol edilmesini sağlar.

Relative Nasıl Düşünülmeli? Relative kullanırken şu üç soruyu sormak yeterlidir:

  • Bu öğe akışta kalmalı mı?
  • Sadece görsel olarak mı yer değiştirmeli?
  • Bir absolute çocuk için referans mı oluşturuyor?

Bu soruların cevabı, relative kullanımını tamamen netleştirir.

</>
Relative (Göreceli): "Ruhu Geride Kalanlar" Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relative (Göreceli): "Ruhu Geride Kalanlar" Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <ul class="ana-navigasyon">
        <li>Anasayfa</li>
        <li>
            Kurumsal
            <ul class="alt-sayfalar">
                <li>Hakkımızda</li>
                <li>Vizyonumuz</li>
            </ul>
        </li>
    </ul>
</body>

</html>
/* SADECE ana-navigasyon'un doğrudan çocuklarını (.öz evlatları) hedefle */
.ana-navigasyon>li {
    display: inline-block;
    border: 2px solid #3498db;
    padding: 10px 20px;
    border-radius: 20px;
    color: #3498db;
    font-weight: bold;
}

/* Alt sayfalar (torunlar) yukarıdaki çerçeveyi otomatik olarak ALMAZ. */
.alt-sayfalar li {
    border: none;
    color: #666;
    font-weight: normal;
    padding: 5px;
}
Seviye 5

Mutlak Konumlandırma (Absolute) Akıştan Kopuş ve Kesin Koordinatlar

Vakum Etkisi: Akıştan Silinmek

position: absolute kullandığınız an, o öğe Normal Akış ile olan tüm bağlarını koparır.

Relative'den en büyük farkı şudur: Relative geride bir "Hayalet Boşluk" bırakırken, Absolute arkasında hiçbir iz bırakmaz.

Öğe akıştan çıktığı anda, kapladığı alan yok olur ( collapse ).

Diğer içerikler, o öğe hiç var olmamış gibi yukarı kayarak boşluğu hemen doldurur.

Absolute, position sisteminde gerçek kopuş noktasıdır; öğe artık hem akıştan çıkar hem de tamamen yeni bir referans sistemine bağlanır.

Referans Avı: "Kime Göre Konumlanacağım?"

Özgürlüğünü ilan eden absolute bir öğe, kendine yeni bir merkez noktası ( referans ) arar , bu arama işlemi içten dışa doğru gerçekleşir.

Tarayıcı, öğenin ebeveynlerine tek tek bakar: "Senin position değerin static mi?"

Eğer ebeveyn static ise onu atlar ve bir üstteki ebeveyne bakar.

Relative , Absolute, Fixed veya Sticky olan ilk ebeveyni bulduğunda, orayı kendine merkez kabul eder.

Debug Perspektifi Bir absolute öğe beklediğiniz yerde değilse, sorun genellikle kendisinde değil, referans aldığı ebeveyendedir.

Bu yüzden ilk kontrol edilmesi gereken şey, hangi elementin positioning context oluşturduğudur.

Sahipsiz Kalmak (Body Referansı)

Eğer absolute öğe, soyağacındaki hiçbir ebeveynde özel bir konumlandırma bulamazsa ne olur?

En son çare olarak sayfanın en tepesine, yani <html> bloğuna tutunur.

Bu yüzden bazen menülerinizin veya butonlarınızın, kutunun içinde değil de sayfanın en sağ üst köşesinde belirdiğini görürsünüz.

Çözüm, ebeveyne position: relative vermektir.

Bu durum, özellikle dropdown, tooltip veya modal gibi bileşenlerin yanlış yerde görünmesine neden olan en yaygın hatalardan biridir.

Boyut Manipülasyonu ve Esneme

Normalde blok öğeler satırı kaplar (width: 100%).

Ancak absolute öğeler, sadece içindeki metin kadar yer kaplar ( shrink-to-fit ).

Ancak harika bir numara vardır: Eğer öğeye aynı anda hem left: 0 hem de right: 0 verirseniz, öğe genişliğini kaybetmez, aksine ebeveyninin genişliği kadar zorla sündürülür (stretch).

Tam ekran kaplayan Modal ve Overlay pencereleri genellikle top: 0; bottom: 0; left: 0; right: 0; tekniği ile yapılır.

Absolute, genellikle üst üste bindirme, overlay oluşturma veya bağımsız bileşen konumlandırma gerektiğinde tercih edilir.

Absolute Nasıl Düşünülmeli? Absolute kullanırken şu üç soruya cevap vermek yeterlidir:

  • Bu öğe akıştan çıkmalı mı?
  • Hangi ebeveyne göre konumlanmalı?
  • Üst üste binme (overlay) gerekiyor mu?

Bu sorular, absolute kullanımını tahmin edilebilir ve kontrol edilebilir hale getirir.

</>
Absolute (Mutlak): "Köklerini Terk Edenler" Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute (Mutlak): "Köklerini Terk Edenler" Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="ebeveyn-kart">
        <div class="etiket">YENİ</div>
        <h3>Ürün Başlığı</h3>
        <p>Kartın içindeki içerik...</p>
    </div>
</body>

</html>

                            
.ebeveyn-kart {
    position: relative;
    width: 250px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-family: sans-serif;
}

.etiket {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
}
Seviye 5

Sabit Konumlandırma (Fixed) Ekrana Çivilenmiş Öğeler

Görüş Alanına Hapsolmak

position: fixed, mutlak konumlandırmanın ( absolute ) daha inatçı bir kuzenidir.

Absolute öğeler belgeye ( sayfaya) göre konumlanırken, Fixed öğeler doğrudan Viewport'a (Tarayıcı Penceresi) göre konumlanır.

Bu, sayfa ne kadar uzun olursa olsun veya kullanıcı ne kadar aşağıya kaydırırsa kaydırsın, öğenin ekrandaki yerinin

asla değişmeyeceği anlamına gelir.

Fixed, position sisteminde absolute mantığını kullanır ancak referans noktasını tamamen değiştirerek Viewport'a sabitler.

Akıştan Kopuşun Zirvesi

Tıpkı absolute gibi, fixed öğeler de Normal Akış'tan tamamen çıkarılır.

Arkalarında boşluk bırakmazlar, diğer içerikler, fixed öğenin altından akıp gitmeye devam eder.

Bu durum, genellikle fixed öğelerin (sabit üst menülerin) sayfa içeriğinin üstünü kapatmasına ( overlapping ) neden olur.

Bunu önlemek için genellikle sayfanın gövdesine (body) veya ilk içeriğe, menünün yüksekliği kadar bir padding-top verilir.

Debug Perspektifi Eğer bir fixed öğe beklediğiniz gibi tüm ekrana sabitlenmiyorsa, büyük ihtimalle ebeveynlerinden biri yeni bir referans sistemi oluşturmuştur.

Mobil Dönüşüm Tuzağı (Transform Sorunu)

Fixed'in en büyük istisnası ve teknik tuzağı buradadır.

Eğer fixed bir öğenin ebeveynlerinden herhangi birinde transform, filter veya perspective özelliği varsa, fixed öğe artık Viewport'a göre değil, o ebeveyne göre sabitlenir.

Bu durumda "tüm ekrana sabitleme" büyüsü bozulur ve öğe o küçük kutu içinde hareket eder.

Bu davranış, birçok geliştiricinin "fixed neden çalışmıyor?" sorusunun temel nedenidir.

Kullanım Senaryoları
  • Sticky Header: Kullanıcı aşağı indikçe kaybolmayan navigasyon menüleri.
  • Back to Top: Sağ alt köşede bekleyen "Yukarı Çık" butonları.
  • Modal / Lightbox: Sayfanın ortasında açılan ve arka planı karartan pencereler.

(Genellikle top: 50%; left: 50%; transform: translate(-50%, -50%); ile merkeze alınır.)

Fixed, ekranla birlikte sabit kalması gereken öğeler için idealdir; ancak içerikle birlikte hareket etmesi gereken durumlarda sticky daha doğru bir seçimdir.

Fixed Nasıl Düşünülmeli? Fixed kullanırken şu üç soruyu sormak yeterlidir:

  • Bu öğe ekranla birlikte sabit kalmalı mı?
  • Viewport mu yoksa bir ebeveyn mi referans alınmalı?
  • Üst üste binme (overlay) problemi oluşturur mu?

Bu sorular, fixed kullanımını doğru ve kontrollü hale getirir.

</>
Fixed (Sabit): "Ekrana Çivilenenler" Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed (Sabit): "Ekrana Çivilenenler" Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="sabit-buton">
        Bana Her Zaman Ulaş!
    </div>
</body>

</html>
.sabit-buton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #2c3e50;
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
}
Seviye 5

Yapışkan Konumlandırma (Sticky) Hibrit Zeka ve Bağlamsal Sabitleme

Bukalemun Davranışı: İki Dünyanın Birleşimi

position: sticky, CSS dünyasının melez çocuğudur.

Bir öğe, belirlediğiniz sınıra gelene kadar Relative ( akışın içinde ) gibi davranır.

Ancak kullanıcı sayfayı kaydırıp öğe belirlenen eşiğe (örneğin top: 0) değdiği an, öğe kimlik değiştirir ve Fixed gibi davranarak ekrana yapışır.

Sticky, position sisteminde relative ve fixed davranışlarının birleşimidir; ancak bu geçiş belirli bir eşik ve ebeveyn sınırı ile kontrol edilir.

Altın Kafes: Ebeveyn Sınırı

Sticky ile Fixed arasındaki en hayati fark şudur: Fixed öğeler özgürdür ( tüm ekranı kullanır ), ancak Sticky öğeler ebeveynlerine hapsolmuştur

Yapışkan bir öğe, sadece kendi ebeveyn kutusu görünür olduğu sürece yapışık kalır.

Ebeveynin sonuna gelindiğinde, ebeveyn öğeyi de beraberinde sürükler ve ekrandan götürür.

Bu yüzden sticky öğenin çalışması için ebeveynin uzun bir yüksekliğe sahip olması gerekir.

Debug Perspektifi Sticky çalışmıyorsa, sorun çoğu zaman öğede değil, ebeveynin sınırlarındadır.

Bu yüzden sticky debug ederken her zaman parent zinciri incelenmelidir.

Çalışmama Garantisi (Overflow Tuzağı)

Geliştiricilerin saç baş yolduğu en büyük sorun buradadır.

Eğer sticky öğenin herhangi bir ebeveyninde (body dahil) overflow: hidden, overflow: scroll veya overflow: auto tanımlıysa, yapışkan özellik tamamen devre dışı kalır.

Sticky çalışmıyorsa, ilk bakmanız gereken yer ebeveynlerin taşma kurallarıdır.

Tetikleyici Koordinat Şartı Sadece position: sticky yazmak yeterli değildir; tarayıcıya "Nereye yapışayım?" sorusunun cevabını vermelisiniz.

En az bir eşik değeri (top, bottom, left veya right) belirtilmelidir.

Örneğin: top: 20px derseniz, öğe ekranın tepesine 20px kala fren yapar ve orada asılı kalır.

Sticky Nasıl Düşünülmeli? Sticky kullanırken şu üç soruya cevap vermek yeterlidir:

  • Bu öğe ne zaman sabitlenmeli?
  • Hangi ebeveyn sınırı içinde kalmalı?
  • Hangi eşik değeri tetikleyici olacak?

Bu sorular, sticky davranışını tamamen öngörülebilir hale getirir.

</>
Sticky (Yapışkan): "Sınırı Geçince Değişenler" Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky (Yapışkan): "Sınırı Geçince Değişenler" Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="icerik-alani">
        <nav class="yapiskan-menu">Ben Bir Navigasyonum</nav>
        <div class="uzun-metin">
            <p>Aşağı kaydırdıkça menü yukarıda yapışık kalacak...</p>
            <div style="height: 1000px;"></div>
        </div>
    </div>
</body>

</html>
.yapiskan-menu {
    position: sticky;
    top: 0;
    background-color: #f1c40f;
    padding: 15px;
    font-weight: bold;
    text-align: center;
    font-family: sans-serif;
    border-bottom: 2px solid #d4ac0d;
}
Seviye 5

Z-index ve Stacking Context 3. Boyutu ve Katman Savaşlarını Yönetmek

Görünenin Ötesi: Z Ekseni

Web sayfalarını genellikle X ( yatay ) ve Y ( dikey ) eksenlerinden oluşan iki boyutlu düzlemler olarak düşünürüz.

Ancak konumlandırılmış öğeler devreye girdiğinde, sayfa üçüncü bir boyut olan Z-Ekseni'ni kazanır:

Bu eksen, ekranın yüzeyinden çıkıp doğrudan kullanıcının gözüne doğru uzanan hayali bir çizgidir.

Z-index, öğelerin bu çizgi üzerindeki yerini belirler.

Sayıların Savaşı (Z-index Değerleri)

z-index, öğelere "Sen öne gel", "Sen arkaya geç" demenin matematiksel yoludur.

Pozitif tam sayılar ( 1, 100, 9999 ) öğeyi kullanıcıya yaklaştırır ( üste çıkarır), negatif sayılar ( -1 ) ise öğeyi standart katmanın altına

( arkaya ) iter.

Ancak burada CSS dünyasının en kritik kurallarından biri devreye girer: z-index, pozisyonu "static" olan öğelerde asla çalışmaz.

Bir öğeye derinlik vermek istiyorsanız, önce ona bir kimlik (relative, absolute, fixed, sticky) vermelisiniz.

Görünmez Hiyerarşi: Stacking Context

Bazen "z-index: 9999" verseniz bile öğenin "z-index: 1" olan başka bir öğenin üzerine çıkamadığını görürsünüz.

İşte bunun suçlusu Katmanlama Bağlamıdır.

Stacking Context, HTML içinde oluşan yerel bir nüfuz alanıdır.

Bir öğe yeni bir bağlam oluşturduğunda, içindeki tüm çocukları kendi kurallarına hapseder.

Kural basittir: Alt ligin şampiyonu, üst ligin sonuncusunu geçemez.

Eğer ebeveyn öğe düşük bir z-index ile alt katmanda kalmışsa, çocuğuna milyon z-index verseniz bile ebeveyninin bulunduğu katmanın üzerine çıkamaz.

Doğal Sıralama Kanunu

Hiçbir z-index belirtilmediğinde tarayıcı şu sırayı izler:

  • Arka plan ve kenarlıklar en alttadır.
  • Blok düzeyindeki (div) öğeler onun üzerindedir.
  • Satır içi (text) içerikler blokların üzerindedir.
  • Konumlandırılmış (positioned) öğeler, static olan herkesin üzerindedir.
  • Eğer iki öğe aynı şartlardaysa, HTML kodunda en son yazılan ( DOM Order ) her zaman en üstte görünür.
</>
Z-Index ve Katman Savaşları Örneği Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Z-Index ve Katman Savaşları Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="katman-alani">
        <div class="kutu-arka">Z-Index: 1</div>
        <div class="kutu-on">Z-Index: 10</div>
    </div>
</body>

</html>
.kutu-arka,
.kutu-on {
    position: absolute; 
    width: 150px;
    height: 150px;
    color: white;
    padding: 10px;
    font-family: sans-serif;
    border-radius: 6px;
}

.kutu-arka {
    background-color: #9b59b6;
    top: 20px;
    left: 20px;
    z-index: 1;
}

.kutu-on {
    background-color: #34495e;
    top: 60px;
    left: 60px;
    z-index: 10;
}

Stacking Context Oluşumu Gizli Katmanlar ve Beklenmedik Tetikleyiciler

Ebeveyn Tuzağı: Hapis Kuralı

Stacking Context'i anlamak için bir kutu hiyerarşisi hayal etmelisiniz.

Eğer bir HTML öğesi yeni bir Stacking Context oluşturursa, içindeki tüm çocuk elementler bu bağlamın içine hizalanır ve dış dünyayla rekabet edemez hale gelir.

Yani, ebeveyn elementiniz "z-index: 1" ise, çocuğuna "z-index: 9999" verseniz bile, çocuk sadece

ebeveyninin kendi içindeki diğer kardeşlerini geçebilir; ebeveynin dışındaki "z-index: 2" olan bir kutunun üstüne asla çıkamaz.

Gizli Tetikleyiciler: Sadece Position Değil!

Çoğu geliştirici, sadece "position: relative/absolute" ve "z-index" kullanımının yeni bir katman yarattığını sanır ama bu büyük bir yanılgıdır.

Aşağıdaki CSS özellikleri de, öğeyi sessizce yeni bir Stacking Context'e dönüştürür ve z-index sıralamasını değiştirir:

  • opacity değeri 1'den küçük olan her öğe.
  • transform özelliği tanımlanmış ve değeri "none" olmayan öğeler.
  • filter ( blur, grayscale ) uygulanan öğeler.
  • clip-path veya mask özelliği kullanılan öğeler.

Bu özelliklerden birini kullandığınızda, "z-index" vermeseniz bile öğe, kardeşlerinin üzerine çıkabilir veya çocuklarını hapsedebilir.

Modern Çözüm: Isolation

Bazen bir öğenin, çocuklarını diğerlerinden ayırmasını ve yeni bir bağlam yaratmasını isteriz ama "position" veya "opacity" ile oynamak istemeyiz.

İşte burada isolation: isolate; özelliği devreye girer.

Bu kod, tarayıcıya "Bu öğeyi hesaplarken diğerlerinden yalıt ve yeni bir yığın (stack) başlat" emrini verir.

Karmaşık tasarım hatalarını çözmek için cerrahi bir müdahale aracıdır.

</>
Z-Index ve Katman Savaşları Örneği Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ebeveyn Tuzağı: Hapis Kuralı (The Z-Index Trap) Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="ebeveyn-kutu">
        Ebeveyn (z-index: 1)
        <div class="cocuk-kutu">Çocuk (z-index: 9999)</div>
    </div>

    <div class="rakip-kutu">
        Dışarıdaki Rakip (z-index: 2)
    </div>
</body>

</html>
.ebeveyn-kutu {
    position: relative;
    z-index: 1;
    background-color: #3498db;
    width: 200px;
    height: 150px;
    padding: 20px;
    color: white;
}

.cocuk-kutu {
    position: absolute;
    z-index: 9999;
    background-color: #e74c3c;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    padding: 10px;
}

.rakip-kutu {
    position: relative;
    z-index: 2;
    background-color: #2ecc71;
    width: 200px;
    height: 100px;
    margin-top: -60px;
    color: white;
    padding: 20px;
}
Seviye 5

Containing Block (Kapsayıcı Blok) Koordinatların Sıfır Noktası ve Referans Kutusu

Evrenin Merkezi: "Neye Göre?" Sorusu

CSS'de bir öğeye "top: 0" dediğinizde, tarayıcının ilk sorduğu soru şudur: "Nerenin tepesi?"

İşte bu sorunun cevabı Containing Block'tur.

Kapsayıcı Blok, bir öğenin boyutunun ve konumunun hesaplandığı referans koordinat sistemidir.

Öğeniz, bu kutunun sınırlarını evrenin sınırları kabul eder ve hesaplamalarını ona göre yapar.

Containing Block, position sisteminin görünmeyen temelidir; bir öğenin nerede görüneceğini belirleyen asıl referans noktasıdır.

Matematiksel Görevleri

Konum Hesaplama: top, right, bottom, left değerleri, Kapsayıcı Bloğun kenarlarından itibaren ölçülür.

Debug Perspektifi Bir öğe beklediğiniz yerde değilse, sorun çoğu zaman verdiğiniz değerde değil, referans alınan kapsayıcıdadır.

Yüzde (%) Boyutlandırma: Eğer bir öğeye width: 50% verirseniz, bu %50'lik değer ebeveynin değil, Containing Block 'un genişliğinden hesaplanır. ( Genellikle ebeveyn ve Containing Block aynıdır, ama absolute pozisyonda işler değişir! )

Bu durum, özellikle absolute öğelerde yüzde değerlerinin beklenenden farklı hesaplanmasının en yaygın nedenidir.

Bu yüzden konum hatalarında ilk bakılması gereken şey, öğenin hangi containing block'a bağlı olduğudur.

Bu yüzden absolute öğelerin doğru çalışması, doğrudan doğruya doğru containing block'un oluşturulmasına bağlıdır.

Kimlik Değişimi: Pozisyona Göre Kapsayıcı Seçimi

Bir öğenin Kapsayıcı Bloğu sabit değildir; öğenin position değerine göre değişir:

  • Static / Relative: En yakın blok düzeyindeki ( block-level ) atanın content-box kapsayıcıdır.
  • Absolute: Pozisyonu static olmayan en yakın atanın padding kutusu (padding-box) kapsayıcıdır.
  • Fixed: Genellikle tarayıcı penceresi kapsayıcıdır.
Containing Block Nasıl Düşünülmeli?

Bir konumlandırma problemi gördüğünüzde şu soruları sormak yeterlidir:

  • Bu öğe hangi kapsayıcıya göre hesaplanıyor?
  • Bu kapsayıcı doğru mu seçilmiş?
  • Position değeri bu referansı değiştirmiş mi?

Bu sorular, karmaşık konumlandırma hatalarını hızlıca çözmenizi sağlar.

Konumlandırma Referans Analizi Hangi Değer, Nereyi Referans Alır?
Position Değeri
Kapsayıcı Blok Referansı
Ofset Etkisi
static Akışın Kölesi

Kapsayıcı Blok Referansı: En yakın blok düzeyindeki atasıdır.

Ofset Etkisi: top, left, bottom, right değerleri tamamen yoksayılır.

Tarayıcı bu değerleri hesaplamaya dahil etmez; öğe sadece metin akışına göre sıralanır.

relative Benlik Referansı

Kapsayıcı Blok Referansı: Öğenin kendi varsayılan pozisyonudur. Başka bir ataya bakmaz, aynaya bakar.

Ofset Etkisi: Verilen ofset değerleri, öğenin orijinal kutusunun sol üst köşesine göre hesaplanır.

Önemli olan şudur: Öğe görsel olarak kaysa bile, DOM üzerindeki fiziksel alanı değişmez ve diğer öğeleri itmez.

absolute Ata Arayışı

Kapsayıcı Blok Referansı: Pozisyon değeri static olmayan (relative, absolute, fixed, sticky) en yakın atasıdır.


Eğer böyle bir ata yoksa, ICB (Initial Containing Block) yani sayfanın kökünü ( <html> ) referans alır.

Ofset Etkisi: Koordinatlar, referans alınan atanın Padding Box ( iç boşluk dahil, kenarlık hariç ) kenarlarına göre kesin olarak hesaplanır.

fixed Ekrana Çivileme

Kapsayıcı Blok Referansı: İstisnalar ( transform) hariç her zaman Viewport referans alınır.

Ofset Etkisi: Koordinatlar, pencerenin camına göre belirlenir.

Sayfanın ne kadar uzun olduğu veya scroll çubuğunun nerede olduğu önemsizdir; ofset değerleri ekranın sol üst köşesine göre sabitlenir.

sticky Çift Karakterli

Kapsayıcı Blok Referansı: İki referansı vardır.
Sınırlar için doğrudan ebeveynini (Parent Container), Yapışmak için Viewport'u kullanır.

Ofset Etkisi: Kaydırma hareketi sırasında öğe, ebeveyninin sınırları dışına çıkmamak şartıyla, Viewport'un belirtilen ( top: 0 gibi ) noktasına kilitlenir.