{"id":33768,"date":"2025-11-06T19:41:02","date_gmt":"2025-11-06T16:41:02","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33768"},"modified":"2025-11-06T19:41:02","modified_gmt":"2025-11-06T16:41:02","slug":"css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/","title":{"rendered":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak"},"content":{"rendered":"

CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak<\/h2>\n

Giri\u015f: Web Tasar\u0131m\u0131nda Katmanlaman\u0131n \u00d6nemi<\/h2>\n

Modern web tasar\u0131m\u0131, sadece i\u00e7eri\u011fi d\u00fczg\u00fcn bir \u015fekilde yerle\u015ftirmekten \u00e7ok daha fazlas\u0131n\u0131 gerektirir. Kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek, g\u00f6rsel hiyerar\u015fiyi netle\u015ftirmek ve etkile\u015fimli \u00f6\u011feler olu\u015fturmak i\u00e7in elemanlar\u0131n \u00fcst \u00fcste bindirilmesi, yani katmanlama kritik bir rol oynar. Bir web sayfas\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fczde, genellikle metinler, resimler, butonlar gibi \u00e7e\u015fitli \u00f6\u011felerin iki boyutlu bir d\u00fczlemde yan yana veya alt alta s\u0131raland\u0131\u011f\u0131n\u0131 varsayar\u0131z. Ancak, a\u00e7\u0131l\u0131r men\u00fcler, modal pencereler, tooltipler, sabit ba\u015fl\u0131klar veya altbilgiler gibi dinamik ve etkile\u015fimli bile\u015fenler, bu iki boyutlu varsay\u0131m\u0131 k\u0131rarak \u00fc\u00e7\u00fcnc\u00fc bir boyut, yani derinlik alg\u0131s\u0131 yarat\u0131r. \u0130\u015fte bu derinlik alg\u0131s\u0131n\u0131 y\u00f6netmek ve elemanlar\u0131n hangi s\u0131rayla \u00fcst \u00fcste binece\u011fini belirlemek i\u00e7in CSS’in g\u00fc\u00e7l\u00fc bir \u00f6zelli\u011fi olan z-index<\/code> devreye girer.<\/p>\n

z-index<\/code> \u00f6zelli\u011fi, web geli\u015ftiricilerine elemanlar\u0131n Z ekseni \u00fczerindeki konumunu kontrol etme yetene\u011fi sunar. Bu, bir eleman\u0131n di\u011fer bir eleman\u0131n \u00f6n\u00fcnde mi yoksa arkas\u0131nda m\u0131 g\u00f6r\u00fcnece\u011fini belirlemek anlam\u0131na gelir. G\u00f6rsel hiyerar\u015fiyi do\u011fru bir \u015fekilde kurmak, kullan\u0131c\u0131n\u0131n dikkatini do\u011fru yerlere \u00e7ekmek ve karma\u015f\u0131k aray\u00fczlerde gezinmeyi kolayla\u015ft\u0131rmak i\u00e7in z-index<\/code>‘in do\u011fru kullan\u0131m\u0131 vazge\u00e7ilmezdir. Yanl\u0131\u015f veya eksik anla\u015f\u0131ld\u0131\u011f\u0131nda ise, beklenmedik g\u00f6rsel hatalara, eri\u015filebilirlik sorunlar\u0131na ve geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 “neden \u00e7al\u0131\u015fm\u0131yor?” anlar\u0131na yol a\u00e7abilir. Bu makalede, z-index<\/code>‘in temel prensiplerinden ba\u015flayarak, onunla ayr\u0131lmaz bir \u015fekilde ba\u011flant\u0131l\u0131 olan “y\u0131\u011f\u0131nlama ba\u011flam\u0131” (stacking context) kavram\u0131n\u0131 derinlemesine inceleyece\u011fiz. Ayr\u0131ca, z-index<\/code>‘i etkileyen di\u011fer CSS \u00f6zelliklerini, yayg\u0131n sorunlar\u0131 ve en iyi uygulama y\u00f6ntemlerini ele alarak, bu “kudretli” CSS \u00f6zelli\u011fine kapsaml\u0131 bir bak\u0131\u015f sunmay\u0131 hedefliyoruz.<\/p>\n

CSS Y\u0131\u011f\u0131nlama Ba\u011flam\u0131 (Stacking Context) Nedir?<\/h2>\n

z-index<\/code> \u00f6zelli\u011finin arkas\u0131ndaki en kritik ve \u00e7o\u011fu zaman yanl\u0131\u015f anla\u015f\u0131lan kavram, “y\u0131\u011f\u0131nlama ba\u011flam\u0131” (stacking context) olarak adland\u0131r\u0131l\u0131r. z-index<\/code>‘in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 tam olarak anlayabilmek i\u00e7in \u00f6ncelikle y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n ne oldu\u011funu ve nas\u0131l olu\u015ftu\u011funu kavramak \u015fartt\u0131r. Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131, bir web sayfas\u0131ndaki HTML elemanlar\u0131n\u0131n Z ekseni boyunca s\u0131raland\u0131\u011f\u0131 \u00fc\u00e7 boyutlu bir ortam gibidir. Bu ba\u011flam i\u00e7inde, elemanlar belirli kurallara g\u00f6re \u00fcst \u00fcste s\u0131ralan\u0131r.<\/p>\n

Y\u0131\u011f\u0131nlama Ba\u011flam\u0131n\u0131n Olu\u015fumu<\/h3>\n

Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131, \u00e7e\u015fitli CSS \u00f6zellikleri taraf\u0131ndan tetiklenebilir. En bilinen ve temel tetikleyici, bir elemana position<\/code> \u00f6zelli\u011fi verildi\u011finde (yani static<\/code> d\u0131\u015f\u0131nda relative<\/code>, absolute<\/code>, fixed<\/code> veya sticky<\/code> de\u011ferlerinden biri) ve bu elemana bir z-index<\/code> de\u011feri (otomatik d\u0131\u015f\u0131nda, yani auto<\/code> olmayan bir say\u0131sal de\u011fer) atand\u0131\u011f\u0131nda meydana gelir. Ancak, y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturan tek durum bu de\u011fildir. Modern CSS ile birlikte, bir\u00e7ok ba\u015fka \u00f6zellik de y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturabilir:<\/p>\n

* HTML K\u00f6k Eleman\u0131:<\/strong> <\/code> eleman\u0131 her zaman varsay\u0131lan bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, t\u00fcm sayfan\u0131n temel y\u0131\u011f\u0131nlama ba\u011flam\u0131d\u0131r.
\n* position<\/code> ve z-index<\/code>:<\/strong> position<\/code> \u00f6zelli\u011fi static<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan ve z-index<\/code> \u00f6zelli\u011fi auto<\/code> d\u0131\u015f\u0131nda bir say\u0131sal de\u011fere sahip olan elemanlar.
\n* opacity<\/code>:<\/strong> opacity<\/code> de\u011feri 1’den k\u00fc\u00e7\u00fck olan elemanlar.
\n* transform<\/code>:<\/strong> transform<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan elemanlar (\u00f6rne\u011fin transform: scale(1.1)<\/code>).
\n* filter<\/code>:<\/strong> filter<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan elemanlar (\u00f6rne\u011fin filter: blur(5px)<\/code>).
\n* perspective<\/code>:<\/strong> perspective<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan elemanlar.
\n* will-change<\/code>:<\/strong> will-change<\/code> \u00f6zelli\u011fi opacity<\/code>, transform<\/code>, filter<\/code>, perspective<\/code> veya z-index<\/code> gibi y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturan bir de\u011fere sahip olan elemanlar.
\n* flex<\/code> ve grid<\/code>:<\/strong> Bir flex veya grid kapsay\u0131c\u0131s\u0131n\u0131n \u00e7ocuklar\u0131, e\u011fer z-index<\/code> de\u011ferleri auto<\/code> d\u0131\u015f\u0131nda ise, kendi y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131 olu\u015ftururlar.
\n* position: fixed<\/code> ve position: sticky<\/code>:<\/strong> Bu elemanlar, z-index<\/code> de\u011feri auto<\/code> olsa bile kendi y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131 olu\u015ftururlar.
\n* mix-blend-mode<\/code>:<\/strong> mix-blend-mode<\/code> \u00f6zelli\u011fi normal<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan elemanlar.
\n* isolation: isolate<\/code>:<\/strong> Bu \u00f6zellik, eleman i\u00e7in yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur.<\/p>\n

Y\u0131\u011f\u0131nlama Ba\u011flam\u0131n\u0131n \u00d6zellikleri<\/h3>\n

Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015ftu\u011funda, bu ba\u011flam\u0131n iki temel \u00f6zelli\u011fi vard\u0131r:<\/p>\n

1. \u0130zolasyon:<\/strong> Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n i\u00e7indeki elemanlar, yaln\u0131zca o ba\u011flam\u0131n ebeveynine g\u00f6re s\u0131ralan\u0131r. Di\u011fer y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131n i\u00e7indeki elemanlarla do\u011frudan etkile\u015fimde bulunmazlar. Yani, bir y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n i\u00e7indeki bir eleman\u0131n z-index<\/code> de\u011feri ne kadar y\u00fcksek olursa olsun, o ba\u011flam\u0131n d\u0131\u015f\u0131ndaki bir eleman\u0131n \u00f6n\u00fcnde g\u00f6r\u00fcnmeyebilir. Bunun temel nedeni, bir y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n kendisinin bir b\u00fct\u00fcn olarak ebeveyn y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7inde tek bir atomik birim gibi davranmas\u0131d\u0131r.
\n2. Ba\u011f\u0131ms\u0131zl\u0131k:<\/strong> Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131, kendi i\u00e7inde bir “mini-d\u00fcnya” gibidir. \u0130\u00e7indeki \u00e7ocuk elemanlar\u0131n z-index<\/code> de\u011ferleri, sadece o ba\u011flam\u0131n s\u0131n\u0131rlar\u0131 i\u00e7inde ge\u00e7erlidir. Ebeveyn y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n z-index<\/code> de\u011feri, \u00e7ocuk y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n ve dolay\u0131s\u0131yla onun i\u00e7indeki t\u00fcm elemanlar\u0131n genel s\u0131ralamas\u0131n\u0131 belirler.<\/p>\n

Bu izolasyon ve ba\u011f\u0131ms\u0131zl\u0131k, z-index<\/code> ile ilgili en yayg\u0131n kafa kar\u0131\u015f\u0131kl\u0131klar\u0131n\u0131n kayna\u011f\u0131d\u0131r. Bir eleman\u0131n z-index: 9999<\/code> olmas\u0131na ra\u011fmen ba\u015fka bir eleman\u0131n arkas\u0131nda kalmas\u0131n\u0131n nedeni genellikle, farkl\u0131 y\u0131\u011f\u0131nlama ba\u011flamlar\u0131nda olmalar\u0131 ve ebeveynlerinin z-index<\/code> de\u011ferlerinin bu durumu belirlemesidir. Bu nedenle, z-index<\/code>‘i kullan\u0131rken her zaman eleman\u0131n hangi y\u0131\u011f\u0131nlama ba\u011flam\u0131nda yer ald\u0131\u011f\u0131n\u0131 ve bu ba\u011flam\u0131n ebeveynine g\u00f6re nerede s\u0131raland\u0131\u011f\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak hayati \u00f6neme sahiptir.<\/p>\n

z-index’in Temelleri: Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

z-index<\/code> \u00f6zelli\u011fi, bir eleman\u0131n Z ekseni \u00fczerindeki konumunu belirlemek i\u00e7in kullan\u0131l\u0131r. Ancak, bu \u00f6zelli\u011fin etkili olabilmesi i\u00e7in belirli ko\u015fullar\u0131n sa\u011flanmas\u0131 gerekir.<\/p>\n

position<\/code> \u00d6zelli\u011fi ile \u0130li\u015fkisi<\/h3>\n

z-index<\/code> \u00f6zelli\u011fi, yaln\u0131zca position<\/code> \u00f6zelli\u011fi static<\/code> d\u0131\u015f\u0131nda bir de\u011fere (yani relative<\/code>, absolute<\/code>, fixed<\/code> veya sticky<\/code>) sahip olan elemanlar \u00fczerinde etkilidir. E\u011fer bir eleman\u0131n position<\/code> de\u011feri static<\/code> ise, z-index<\/code> de\u011feri ne olursa olsun hi\u00e7bir etkisi olmayacakt\u0131r. Bu, z-index<\/code> ile ilgili en temel ve en s\u0131k yap\u0131lan hatalardan biridir. Geli\u015ftiriciler genellikle bir elemana z-index<\/code> atar ve hi\u00e7bir de\u011fi\u015fiklik g\u00f6rmediklerinde \u015fa\u015f\u0131r\u0131rlar, oysa \u00e7o\u011fu zaman eksik olan tek \u015fey bir position<\/code> de\u011feri atamakt\u0131r.<\/p>\n

* position: relative;<\/code><\/strong>: Eleman, normal belge ak\u0131\u015f\u0131ndaki konumuna g\u00f6re yerle\u015ftirilir, ancak top<\/code>, right<\/code>, bottom<\/code>, left<\/code> \u00f6zellikleriyle kendi normal konumundan kayd\u0131r\u0131labilir. z-index<\/code> bu eleman \u00fczerinde etkilidir.
\n* position: absolute;<\/code><\/strong>: Eleman, en yak\u0131n pozisyonlanm\u0131\u015f (yani static<\/code> olmayan bir position<\/code> de\u011ferine sahip) atas\u0131na g\u00f6re yerle\u015ftirilir. E\u011fer b\u00f6yle bir ata yoksa, <\/code> eleman\u0131na g\u00f6re konumlan\u0131r. z-index<\/code> bu eleman \u00fczerinde etkilidir.
\n* position: fixed;<\/code><\/strong>: Eleman, taray\u0131c\u0131 penceresine (viewport) g\u00f6re yerle\u015ftirilir ve sayfa kayd\u0131r\u0131lsa bile konumunu korur. z-index<\/code> bu eleman \u00fczerinde etkilidir. position: fixed<\/code> elemanlar, z-index: auto<\/code> olsa bile kendi y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131 olu\u015fturur.
\n* position: sticky;<\/code><\/strong>: Eleman, belirli bir kayd\u0131rma e\u015fi\u011fine ula\u015fana kadar relative<\/code> gibi davran\u0131r, ard\u0131ndan fixed<\/code> gibi davran\u0131r. z-index<\/code> bu eleman \u00fczerinde etkilidir. position: sticky<\/code> elemanlar da z-index: auto<\/code> olsa bile kendi y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131 olu\u015fturur.<\/p>\n

Say\u0131sal De\u011ferler: Pozitif, Negatif ve S\u0131f\u0131r<\/h3>\n

z-index<\/code> \u00f6zelli\u011fi, tam say\u0131 de\u011ferleri al\u0131r. Bu de\u011ferler pozitif, negatif veya s\u0131f\u0131r olabilir.<\/p>\n

* Pozitif De\u011ferler (\u00f6rn. z-index: 1<\/code>, z-index: 100<\/code>):<\/strong> Daha y\u00fcksek pozitif z-index<\/code> de\u011ferine sahip elemanlar, ayn\u0131 y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7indeki daha d\u00fc\u015f\u00fck veya s\u0131f\u0131r z-index<\/code> de\u011ferine sahip elemanlar\u0131n \u00f6n\u00fcnde g\u00f6r\u00fcn\u00fcr. De\u011fer ne kadar y\u00fcksekse, eleman o kadar \u00f6nde yer al\u0131r.
\n* S\u0131f\u0131r De\u011feri (z-index: 0<\/code>):<\/strong> z-index: 0<\/code> de\u011feri, eleman\u0131 pozitif ve negatif z-index<\/code> de\u011ferleri aras\u0131nda bir yere yerle\u015ftirir. Genellikle, pozitif z-index<\/code>‘li elemanlar\u0131n arkas\u0131nda, negatif z-index<\/code>‘li elemanlar\u0131n \u00f6n\u00fcnde ve normal belge ak\u0131\u015f\u0131ndaki elemanlarla ayn\u0131 seviyede (ancak pozisyonlanm\u0131\u015f olduklar\u0131 i\u00e7in yine de \u00fcstte) s\u0131ralan\u0131r.
\n* Negatif De\u011ferler (\u00f6rn. z-index: -1<\/code>, z-index: -10<\/code>):<\/strong> Negatif z-index<\/code> de\u011ferine sahip elemanlar, ayn\u0131 y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7indeki di\u011fer t\u00fcm elemanlar\u0131n (pozitif, s\u0131f\u0131r veya otomatik z-index<\/code>‘li elemanlar) ve hatta baz\u0131 durumlarda ebeveyn eleman\u0131n arka plan\u0131n\u0131n arkas\u0131nda g\u00f6r\u00fcn\u00fcr. Bu, bir eleman\u0131 kas\u0131tl\u0131 olarak bir arka plan\u0131n veya di\u011fer i\u00e7eriklerin arkas\u0131na gizlemek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n

Varsay\u0131lan Davran\u0131\u015f (z-index: auto<\/code>)<\/h3>\n

z-index<\/code> \u00f6zelli\u011finin varsay\u0131lan de\u011feri auto<\/code>‘dur.
\n* E\u011fer bir eleman pozisyonlanm\u0131\u015fsa (static<\/code> d\u0131\u015f\u0131nda bir position<\/code> de\u011feri varsa) ve z-index<\/code> de\u011feri auto<\/code> ise:
\n * Bu eleman, yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturmaz.
\n * Ebeveyninin y\u0131\u011f\u0131nlama ba\u011flam\u0131na kat\u0131l\u0131r ve ebeveyniyle ayn\u0131 y\u0131\u011f\u0131nlama seviyesinde s\u0131ralan\u0131r.
\n * Karde\u015f elemanlar aras\u0131nda, HTML ak\u0131\u015f\u0131ndaki s\u0131ras\u0131na g\u00f6re s\u0131ralan\u0131r; son gelen eleman, di\u011ferlerinin \u00f6n\u00fcnde g\u00f6r\u00fcn\u00fcr.<\/p>\n

Bu varsay\u0131lan davran\u0131\u015f, bir\u00e7ok durumda yeterli olsa da, karma\u015f\u0131k katmanlama senaryolar\u0131nda elemanlar\u0131n beklenmedik \u015fekilde \u00fcst \u00fcste binmesine neden olabilir. Bu nedenle, z-index<\/code> ile manuel kontrol sa\u011flamak istedi\u011finizde auto<\/code> d\u0131\u015f\u0131nda bir say\u0131sal de\u011fer ataman\u0131z gerekir.<\/p>\n

Y\u0131\u011f\u0131nlama Ba\u011flam\u0131 Kurallar\u0131 ve z-index’in Etkile\u015fimi<\/h2>\n

Elemanlar\u0131n Z ekseni \u00fczerindeki s\u0131ralamas\u0131, basit\u00e7e en y\u00fcksek z-index<\/code> de\u011ferine sahip olan\u0131n en \u00fcstte olaca\u011f\u0131 kadar d\u00fcz de\u011fildir. W3C taraf\u0131ndan tan\u0131mlanan karma\u015f\u0131k bir dizi y\u0131\u011f\u0131nlama ba\u011flam\u0131 kural\u0131 vard\u0131r. Bu kurallar, bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7inde ve farkl\u0131 y\u0131\u011f\u0131nlama ba\u011flamlar\u0131 aras\u0131nda elemanlar\u0131n nas\u0131l s\u0131ralanaca\u011f\u0131n\u0131 belirler.<\/p>\n

Ayn\u0131 Y\u0131\u011f\u0131nlama Ba\u011flam\u0131 \u0130\u00e7indeki Elemanlar\u0131n S\u0131ralamas\u0131<\/h3>\n

Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7inde, elemanlar a\u015fa\u011f\u0131daki s\u0131raya g\u00f6re (en alttan en \u00fcste do\u011fru) s\u0131ralan\u0131r:<\/p>\n

1. Kapsay\u0131c\u0131 Eleman\u0131n Arka Plan\u0131 ve Kenarl\u0131klar\u0131:<\/strong> Y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131 olu\u015fturan eleman\u0131n (\u00f6rne\u011fin, position: relative<\/code> ve z-index: 1<\/code> olan bir div<\/code>) kendi arka plan\u0131 ve kenarl\u0131klar\u0131 en altta yer al\u0131r.
\n2. Negatif z-index<\/code>‘li Elemanlar:<\/strong> position<\/code>lanm\u0131\u015f ve negatif z-index<\/code> de\u011ferine sahip olan elemanlar. Daha d\u00fc\u015f\u00fck (daha negatif) z-index<\/code> de\u011ferine sahip olanlar daha altta, daha y\u00fcksek (s\u0131f\u0131ra daha yak\u0131n) negatif z-index<\/code> de\u011ferine sahip olanlar daha \u00fcstte s\u0131ralan\u0131r. Bu elemanlar, ebeveynlerinin arka plan\u0131n\u0131n bile arkas\u0131nda kalabilir.
\n3. Blok Seviyesi Elemanlar:<\/strong> Normal belge ak\u0131\u015f\u0131ndaki pozisyonlanmam\u0131\u015f blok seviyesi elemanlar (\u00f6rne\u011fin div<\/code>, p<\/code>, h1<\/code>). Bunlar, HTML’deki s\u0131ras\u0131na g\u00f6re \u00fcst \u00fcste biner.
\n4. float<\/code> Elemanlar:<\/strong> float<\/code> \u00f6zelli\u011fi verilmi\u015f elemanlar. Bunlar da HTML’deki s\u0131ras\u0131na g\u00f6re \u00fcst \u00fcste biner.
\n5. Inline\/Inline-Block Elemanlar:<\/strong> Normal belge ak\u0131\u015f\u0131ndaki pozisyonlanmam\u0131\u015f inline veya inline-block elemanlar (\u00f6rne\u011fin span<\/code>, a<\/code>, img<\/code>). Bunlar da HTML’deki s\u0131ras\u0131na g\u00f6re \u00fcst \u00fcste biner.
\n6. z-index: auto<\/code> veya z-index: 0<\/code> Olan Pozisyonlanm\u0131\u015f Elemanlar:<\/strong> position<\/code>lanm\u0131\u015f ve z-index: auto<\/code> veya z-index: 0<\/code> de\u011ferine sahip elemanlar. Bunlar, HTML’deki s\u0131ras\u0131na g\u00f6re s\u0131ralan\u0131r.
\n7. Pozitif z-index<\/code>‘li Elemanlar:<\/strong> position<\/code>lanm\u0131\u015f ve pozitif z-index<\/code> de\u011ferine sahip olan elemanlar. Daha d\u00fc\u015f\u00fck pozitif z-index<\/code> de\u011ferine sahip olanlar daha altta, daha y\u00fcksek pozitif z-index<\/code> de\u011ferine sahip olanlar daha \u00fcstte s\u0131ralan\u0131r.<\/p>\n

Bu s\u0131ralama kurallar\u0131, bir y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n i\u00e7indeki elemanlar\u0131n nas\u0131l davrand\u0131\u011f\u0131n\u0131 a\u00e7\u0131klar. \u00d6nemli olan, bu kurallar\u0131n her bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7inde ba\u011f\u0131ms\u0131z olarak uygulanmas\u0131d\u0131r.<\/p>\n

Farkl\u0131 Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131 Aras\u0131ndaki Etkile\u015fim<\/h3>\n

Farkl\u0131 y\u0131\u011f\u0131nlama ba\u011flamlar\u0131 aras\u0131ndaki etkile\u015fim, z-index<\/code>‘in en kafa kar\u0131\u015ft\u0131r\u0131c\u0131 y\u00f6nlerinden biridir. Bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturan bir eleman, kendi ebeveyninin y\u0131\u011f\u0131nlama ba\u011flam\u0131nda tek bir atomik birim olarak d\u00fc\u015f\u00fcn\u00fcl\u00fcr. Bu \u015fu anlama gelir:<\/p>\n

* Ebeveynin z-index<\/code>‘i Belirleyicidir:<\/strong> Bir \u00e7ocu\u011fun z-index<\/code> de\u011feri, ne kadar y\u00fcksek olursa olsun, kendi ebeveyninin z-index<\/code> de\u011ferini ge\u00e7ersiz k\u0131lamaz. E\u011fer bir ebeveyn eleman (parent-A<\/code>) z-index: 1<\/code> ile bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturuyorsa ve ba\u015fka bir karde\u015f eleman (sibling-B<\/code>) z-index: 2<\/code> ile ba\u015fka bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturuyorsa, sibling-B<\/code> her zaman parent-A<\/code>‘n\u0131n \u00f6n\u00fcnde olacakt\u0131r.
\n* \u00c7ocu\u011fun z-index<\/code>‘i Sadece Kendi Ba\u011flam\u0131nda Ge\u00e7erlidir:<\/strong> parent-A<\/code>‘n\u0131n i\u00e7inde z-index: 999<\/code>‘a sahip bir \u00e7ocuk eleman (child-A<\/code>) olsa bile, bu child-A<\/code> asla sibling-B<\/code>‘nin \u00f6n\u00fcne ge\u00e7emez. \u00c7\u00fcnk\u00fc child-A<\/code>, parent-A<\/code>‘n\u0131n y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n bir par\u00e7as\u0131d\u0131r ve parent-A<\/code>‘n\u0131n kendisi sibling-B<\/code>‘nin arkas\u0131nda s\u0131ralanm\u0131\u015ft\u0131r.<\/p>\n

Bu durum, “neden benim z-index: 9999<\/code>‘um \u00e7al\u0131\u015fm\u0131yor?” sorusunun en yayg\u0131n cevab\u0131d\u0131r. \u00c7\u00f6z\u00fcm genellikle, y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131 olu\u015fturan ebeveyn elemanlar\u0131n z-index<\/code> de\u011ferlerini ve konumlar\u0131n\u0131 g\u00f6zden ge\u00e7irmektir. Bazen, z-index<\/code> sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in HTML yap\u0131s\u0131n\u0131 veya CSS \u00f6zelliklerini yeniden d\u00fczenlemek gerekebilir.<\/p>\n

z-index’i Tetikleyen Di\u011fer CSS \u00d6zellikleri<\/h2>\n

Daha \u00f6nce de belirtti\u011fimiz gibi, z-index<\/code>‘in \u00e7al\u0131\u015fmas\u0131 sadece position<\/code> ve z-index<\/code> de\u011ferine ba\u011fl\u0131 de\u011fildir. Modern CSS, bir eleman\u0131n y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturmas\u0131n\u0131 sa\u011flayan bir\u00e7ok ba\u015fka \u00f6zellik sunar. Bu \u00f6zellikler, elemanlar\u0131n g\u00f6rsel efektler veya performans optimizasyonlar\u0131 nedeniyle kendili\u011finden yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturmas\u0131na yol a\u00e7ar ve bu da z-index<\/code> davran\u0131\u015f\u0131n\u0131 etkiler.<\/p>\n

* opacity<\/code> < 1:<\/strong> Bir eleman\u0131n opacity<\/code> de\u011feri 1’den k\u00fc\u00e7\u00fck oldu\u011funda (\u00f6rne\u011fin opacity: 0.99<\/code> bile olsa), bu eleman otomatik olarak yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, \u015feffafl\u0131k efektlerinin do\u011fru \u015fekilde i\u015flenmesini sa\u011flamak i\u00e7indir.
\n* transform<\/code> (herhangi bir de\u011fer):<\/strong> transform<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip oldu\u011funda (\u00f6rne\u011fin transform: scale(1.1)<\/code>, transform: rotate(45deg)<\/code>, transform: translateZ(0)<\/code>), eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, 3D d\u00f6n\u00fc\u015f\u00fcmlerin do\u011fru bir \u015fekilde i\u015flenmesi i\u00e7in gereklidir. \u00d6zellikle translateZ(0)<\/code> veya perspective(1px)<\/code> gibi “bo\u015f” d\u00f6n\u00fc\u015f\u00fcmler bile y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturabilir ve bu, bazen istenmeyen z-index<\/code> sorunlar\u0131na yol a\u00e7abilir.
\n* filter<\/code> (herhangi bir de\u011fer):<\/strong> filter<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip oldu\u011funda (\u00f6rne\u011fin filter: blur(5px)<\/code>, filter: drop-shadow(2px 2px 2px black)<\/code>), eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur.
\n* perspective<\/code> (herhangi bir de\u011fer):<\/strong> perspective<\/code> \u00f6zelli\u011fi none<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip oldu\u011funda, eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur.
\n* will-change<\/code> (belirli de\u011ferler):<\/strong> will-change<\/code> \u00f6zelli\u011fi, taray\u0131c\u0131ya bir eleman\u0131n belirli bir CSS \u00f6zelli\u011fi \u00fczerinde de\u011fi\u015fime u\u011frayaca\u011f\u0131n\u0131 \u00f6nceden bildirmek i\u00e7in kullan\u0131l\u0131r. E\u011fer will-change<\/code> \u00f6zelli\u011fi opacity<\/code>, transform<\/code>, filter<\/code>, perspective<\/code> veya z-index<\/code> gibi y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturan bir de\u011fere ayarlanm\u0131\u015fsa, eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, performans\u0131 art\u0131rmak i\u00e7in tasarlanm\u0131\u015f olsa da, y\u0131\u011f\u0131nlama davran\u0131\u015f\u0131n\u0131 da etkiler.
\n* contain: layout<\/code> veya contain: paint<\/code>:<\/strong> contain<\/code> \u00f6zelli\u011fi, taray\u0131c\u0131ya bir eleman\u0131n alt a\u011fac\u0131n\u0131n di\u011fer elemanlardan ba\u011f\u0131ms\u0131z oldu\u011funu bildirerek performans optimizasyonlar\u0131 sa\u011flar. layout<\/code> veya paint<\/code> de\u011ferleri, eleman\u0131n yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturmas\u0131na neden olabilir.
\n* flex<\/code> veya grid<\/code> \u00f6\u011feleri (z-index<\/code>‘i auto d\u0131\u015f\u0131 oldu\u011funda):<\/strong> Bir flex veya grid kapsay\u0131c\u0131s\u0131n\u0131n do\u011frudan \u00e7ocuklar\u0131, e\u011fer z-index<\/code> de\u011ferleri auto<\/code> d\u0131\u015f\u0131nda bir say\u0131sal de\u011fere ayarlanm\u0131\u015fsa, kendi y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131 olu\u015ftururlar.
\n* position: fixed<\/code> veya position: sticky<\/code>:<\/strong> Bu elemanlar, z-index<\/code> de\u011feri auto<\/code> olsa bile kendi y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131 olu\u015ftururlar. Bu, genellikle taray\u0131c\u0131 penceresine g\u00f6re sabitlenen \u00f6\u011felerin (ba\u015fl\u0131klar, altbilgiler, navigasyon men\u00fcleri) di\u011fer i\u00e7eriklerin \u00fczerinde kalmas\u0131n\u0131 sa\u011flamak i\u00e7indir.
\n* mix-blend-mode<\/code> (auto d\u0131\u015f\u0131 oldu\u011funda):<\/strong> mix-blend-mode<\/code> \u00f6zelli\u011fi normal<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip oldu\u011funda, eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, farkl\u0131 katmanlar\u0131n renklerinin nas\u0131l kar\u0131\u015ft\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.
\n* isolation: isolate<\/code>:<\/strong> Bu CSS \u00f6zelli\u011fi, a\u00e7\u0131k\u00e7a bir eleman i\u00e7in yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturur. Bu, \u00f6zellikle mix-blend-mode<\/code> gibi \u00f6zelliklerle \u00e7al\u0131\u015f\u0131rken eleman\u0131n di\u011fer i\u00e7eriklerden izole edilmesini sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n

Bu \u00f6zelliklerin y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturma yetene\u011fi, bazen fark\u0131nda olmadan z-index<\/code> sorunlar\u0131na yol a\u00e7abilir. \u00d6rne\u011fin, bir animasyon i\u00e7in transform: translateZ(0)<\/code> ekledi\u011finizde, bu eleman yeni bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturarak bekledi\u011finizden farkl\u0131 bir \u015fekilde s\u0131ralanabilir. Bu nedenle, z-index<\/code> ile ilgili sorunlar\u0131 giderirken sadece position<\/code> ve z-index<\/code> de\u011ferlerini de\u011fil, ayn\u0131 zamanda bu di\u011fer \u00f6zelliklerin varl\u0131\u011f\u0131n\u0131 da kontrol etmek \u00f6nemlidir.<\/p>\n

Yayg\u0131n z-index Sorunlar\u0131 ve \u00c7\u00f6z\u00fcmleri<\/h2>\n

z-index<\/code>, web geli\u015ftiricilerinin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 en s\u0131k kafa kar\u0131\u015ft\u0131r\u0131c\u0131 CSS \u00f6zelliklerinden biridir. “Neden benim z-index<\/code>‘im \u00e7al\u0131\u015fm\u0131yor?” sorusu, forumlarda ve geli\u015ftirici topluluklar\u0131nda s\u0131kl\u0131kla dile getirilir. Bu sorunlar\u0131n \u00e7o\u011fu, y\u0131\u011f\u0131nlama ba\u011flam\u0131 kavram\u0131n\u0131n tam olarak anla\u015f\u0131lmamas\u0131ndan kaynaklan\u0131r.<\/p>\n

“Neden Benim z-index<\/code>‘im \u00c7al\u0131\u015fm\u0131yor?”<\/h3>\n

Bu sorunun arkas\u0131ndaki en yayg\u0131n nedenler \u015funlard\u0131r:<\/p>\n

1. position<\/code> Eksikli\u011fi:<\/strong> Daha \u00f6nce de belirtildi\u011fi gibi, z-index<\/code> yaln\u0131zca position<\/code> \u00f6zelli\u011fi static<\/code> d\u0131\u015f\u0131nda bir de\u011fere sahip olan elemanlar \u00fczerinde etkilidir. E\u011fer bir elemana z-index<\/code> atam\u0131\u015f, ancak position: relative;<\/code>, position: absolute;<\/code>, position: fixed;<\/code> veya position: sticky;<\/code> gibi bir position<\/code> de\u011feri vermemi\u015fseniz, z-index<\/code> \u00e7al\u0131\u015fmayacakt\u0131r.
\n * \u00c7\u00f6z\u00fcm:<\/strong> \u0130lgili elemana position: relative;<\/code> veya ihtiyaca g\u00f6re ba\u015fka bir position<\/code> de\u011feri atay\u0131n.
\n2. Y\u0131\u011f\u0131nlama Ba\u011flam\u0131 \u00c7at\u0131\u015fmalar\u0131 (Ebeveynin z-index<\/code>‘i):<\/strong> Bu, en s\u0131k g\u00f6r\u00fclen ve anla\u015f\u0131lmas\u0131 en zor durumlardan biridir. E\u011fer bir eleman (\u00e7ocuk) y\u00fcksek bir z-index<\/code> de\u011ferine sahipse, ancak onun ebeveyni (veya daha \u00fcst bir atas\u0131) ba\u015fka bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7inde daha d\u00fc\u015f\u00fck bir z-index<\/code> de\u011ferine sahipse, \u00e7ocu\u011fun z-index<\/code> de\u011feri ebeveyninin s\u0131n\u0131rlar\u0131 i\u00e7inde kalacakt\u0131r. Yani, ebeveynin z-index<\/code>‘i, \u00e7ocu\u011fun ve onun i\u00e7indeki her \u015feyin genel y\u0131\u011f\u0131nlama seviyesini belirler.
\n * Senaryo:<\/strong> Bir div.modal<\/code>‘\u0131n\u0131z var, z-index: 9999<\/code>. Ancak bu modal, z-index: 10<\/code> olan ba\u015fka bir div.container<\/code> i\u00e7inde. div.container<\/code>‘\u0131n karde\u015fleri aras\u0131nda z-index: 20<\/code> olan ba\u015fka bir eleman (div.sidebar<\/code>) varsa, modal\u0131n\u0131z sidebar<\/code>‘\u0131n arkas\u0131nda kalacakt\u0131r, \u00e7\u00fcnk\u00fc modal\u0131n ebeveyni olan container<\/code>, sidebar<\/code>‘\u0131n arkas\u0131nda.
\n * \u00c7\u00f6z\u00fcm:<\/strong> Y\u0131\u011f\u0131nlama sorunlar\u0131 ya\u015fayan elemanlar\u0131n t\u00fcm atalar\u0131n\u0131n position<\/code> ve z-index<\/code> de\u011ferlerini inceleyin. Sorunu \u00e7\u00f6zmek i\u00e7in ebeveyn veya ata elemanlar\u0131n z-index<\/code> de\u011ferlerini ayarlaman\u0131z gerekebilir. Bazen, HTML yap\u0131s\u0131n\u0131 de\u011fi\u015ftirerek (\u00f6rne\u011fin, modal\u0131 <\/code> etiketinin hemen alt\u0131na ta\u015f\u0131yarak) sorunu \u00e7\u00f6zmek en kolay yoldur, b\u00f6ylece modal kendi ba\u011f\u0131ms\u0131z y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131 k\u00f6k d\u00fczeyde olu\u015fturur ve di\u011fer elemanlar\u0131n ebeveynlerinin z-index<\/code>‘lerinden etkilenmez.
\n3. Yanl\u0131\u015f Beklentiler (Sibling vs. Descendant):<\/strong> z-index<\/code> sadece ayn\u0131 y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7indeki karde\u015f elemanlar aras\u0131nda do\u011frudan kar\u015f\u0131la\u015ft\u0131rma yapar. Bir eleman, kendisinden daha derin bir hiyerar\u015fide bulunan (torun olan) bir elemanla do\u011frudan z-index<\/code> kar\u015f\u0131la\u015ft\u0131rmas\u0131 yapamaz.
\n * \u00c7\u00f6z\u00fcm:<\/strong> Y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131n hiyerar\u015fisini ve elemanlar\u0131n bu ba\u011flamlar i\u00e7indeki yerle\u015fimini do\u011fru anlamak.<\/p>\n

Debugging Teknikleri (Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131)<\/h3>\n

z-index<\/code> sorunlar\u0131n\u0131 gidermek i\u00e7in taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131 vazge\u00e7ilmezdir.<\/p>\n

* Elemanlar\u0131 \u0130ncele:<\/strong> Sorunlu eleman\u0131 sa\u011f t\u0131klay\u0131p “\u0130ncele” (Inspect) se\u00e7ene\u011fini kullan\u0131n.
\n* Computed Styles (Hesaplanm\u0131\u015f Stiller):<\/strong> Eleman\u0131n “Computed” (Hesaplanm\u0131\u015f) sekmesini kontrol ederek, eleman\u0131n ger\u00e7ekten hangi position<\/code> ve z-index<\/code> de\u011ferlerine sahip oldu\u011funu g\u00f6r\u00fcn. Ayr\u0131ca, opacity<\/code>, transform<\/code>, filter<\/code> gibi di\u011fer \u00f6zelliklerin de y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturup olu\u015fturmad\u0131\u011f\u0131n\u0131 kontrol edin.
\n* Layout\/Elements Panelinde Gezinme:<\/strong> HTML yap\u0131s\u0131nda yukar\u0131 do\u011fru gezinerek eleman\u0131n atalar\u0131n\u0131 inceleyin. Hangi atalar\u0131n bir y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturdu\u011funu belirleyin. Chrome DevTools’ta “Elements” panelinde elemanlar\u0131 se\u00e7ti\u011finizde, bazen bir eleman\u0131n “stacking context” olup olmad\u0131\u011f\u0131n\u0131 g\u00f6steren ipu\u00e7lar\u0131 g\u00f6rebilirsiniz.
\n* z-index<\/code> De\u011ferlerini Deneme:<\/strong> Geli\u015ftirici ara\u00e7lar\u0131nda elemanlar\u0131n z-index<\/code> de\u011ferlerini an\u0131nda de\u011fi\u015ftirerek farkl\u0131 sonu\u00e7lar\u0131 deneyin. Bu, do\u011fru de\u011feri bulman\u0131za veya sorunun kayna\u011f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olabilir.
\n* CSS isolation: isolate<\/code> Kullan\u0131m\u0131:<\/strong> Bazen, bir eleman\u0131 kas\u0131tl\u0131 olarak kendi y\u0131\u011f\u0131nlama ba\u011flam\u0131na zorlamak, karma\u015f\u0131k z-index<\/code> sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in basit bir yol olabilir. isolation: isolate;<\/code> \u00f6zelli\u011fini ekleyerek eleman\u0131 kendi ba\u011flam\u0131na alabilir ve bu ba\u011flam\u0131n z-index<\/code>‘ini daha kolay y\u00f6netebilirsiniz.<\/p>\n

En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h2>\n

z-index<\/code>‘i etkin ve sorunsuz bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar ve stratejiler mevcuttur. Bu yakla\u015f\u0131mlar, gelecekteki bak\u0131m s\u00fcre\u00e7lerini kolayla\u015ft\u0131r\u0131r ve beklenmedik g\u00f6rsel hatalar\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n

Y\u00fcksek z-index<\/code> De\u011ferlerinden Ka\u00e7\u0131nma (9999 gibi)<\/h3>\n

Geli\u015ftiriciler genellikle bir eleman\u0131 her \u015feyin \u00fczerine \u00e7\u0131karmak i\u00e7in z-index: 9999<\/code> veya benzeri abart\u0131l\u0131 de\u011ferler kullanma e\u011filimindedir. Bu, k\u0131sa vadede sorunu \u00e7\u00f6zse de, uzun vadede “z-index sava\u015flar\u0131na” yol a\u00e7abilir. Proje b\u00fcy\u00fcd\u00fck\u00e7e veya ba\u015fkalar\u0131 kod \u00fczerinde \u00e7al\u0131\u015ft\u0131k\u00e7a, herkes en y\u00fcksek z-index<\/code> de\u011ferini kullanmaya ba\u015flar ve sonunda daha da y\u00fcksek bir de\u011fere ihtiya\u00e7 duyulur. Bu, y\u00f6netilmesi imkans\u0131z bir z-index<\/code> karma\u015fas\u0131na yol a\u00e7ar.
\n* \u00c7\u00f6z\u00fcm:<\/strong> z-index<\/code> de\u011ferlerini m\u00fcmk\u00fcn oldu\u011funca d\u00fc\u015f\u00fck tutun ve yaln\u0131zca gerekti\u011finde art\u0131r\u0131n.<\/p>\n

Anlamsal z-index<\/code> De\u011ferleri Kullanma<\/h3>\n

Rastgele y\u00fcksek say\u0131lar yerine, z-index<\/code> de\u011ferlerini mant\u0131ksal bir s\u0131ra ve anlamsal bir anlamla kullanmak daha iyidir.
\n* \u00d6rnek Strateji:<\/strong>
\n * Temel Katmanlar (1-10):<\/strong> Normal i\u00e7erik, arka planlar, ana d\u00fczen \u00f6\u011feleri.
\n * Etkile\u015fimli Bile\u015fenler (100-200):<\/strong> Navigasyon men\u00fcleri, tooltipler, a\u00e7\u0131l\u0131r pencereler (dropdowns).
\n * Modallar ve Overlayler (1000-2000):<\/strong> Sayfan\u0131n geri kalan\u0131n\u0131 kapatan tam ekran modallar veya overlayler.
\n * Bildirimler ve Toast Mesajlar\u0131 (9000+):<\/strong> En \u00fcstte g\u00f6r\u00fcnmesi gereken ge\u00e7ici bildirimler.
\n* Farkl\u0131l\u0131k B\u0131rakma:<\/strong> De\u011ferler aras\u0131nda bo\u015fluk b\u0131rak\u0131n (\u00f6rn. 10, 20, 30 veya 100, 200, 300). Bu, gelecekte araya yeni bir katman eklemeniz gerekti\u011finde size esneklik sa\u011flar.<\/p>\n

Mod\u00fcller ve Bile\u015fenler \u0130\u00e7in z-index<\/code> Stratejileri<\/h3>\n

B\u00fcy\u00fck projelerde, her bile\u015fenin kendi z-index<\/code>‘ini ba\u011f\u0131ms\u0131z olarak y\u00f6netmesi karma\u015faya yol a\u00e7abilir.
\n* Bile\u015fen Bazl\u0131 Yakla\u015f\u0131m:<\/strong> Her bile\u015fenin kendi i\u00e7inde g\u00f6receli z-index<\/code> de\u011ferleri kullanmas\u0131n\u0131 sa\u011flay\u0131n (\u00f6rn. bir a\u00e7\u0131l\u0131r men\u00fc i\u00e7indeki \u00f6\u011feler i\u00e7in 1, 2, 3). Bile\u015fenin kendisi i\u00e7in ise, genel z-index<\/code> y\u00f6netimi kapsam\u0131nda bir de\u011fer atay\u0131n.
\n* Global z-index<\/code> Haritas\u0131:<\/strong> Projenin genelinde kullan\u0131lan \u00f6nemli z-index<\/code> de\u011ferlerini tan\u0131mlayan bir de\u011fi\u015fken veya harita olu\u015fturun. \u00d6rne\u011fin, SASS’ta:<\/p>\n

$z-indexes: (\n      base: 1,\n      dropdown: 100,\n      modal: 1000,\n      loader: 9999\n    );\n\n    .dropdown {\n      z-index: map-get($z-indexes, dropdown);\n    }<\/code><\/pre>\n
    Bu, t\u00fcm z-index<\/code> de\u011ferlerini merkezi bir yerden y\u00f6netmenizi sa\u011flar ve tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/p>\n
Eri\u015filebilirlik<\/h3>\n
z-index<\/code>‘in eri\u015filebilirlik \u00fczerindeki etkisini g\u00f6z ard\u0131 etmeyin. \u00d6zellikle modal pencereler ve tooltipler gibi elemanlar, ekran okuyucular ve klavye navigasyonu i\u00e7in do\u011fru \u015fekilde y\u00f6netilmelidir.
\n*   Odak Y\u00f6netimi:<\/strong> Bir modal a\u00e7\u0131ld\u0131\u011f\u0131nda, odak modal\u0131n i\u00e7ine ta\u015f\u0131nmal\u0131 ve modal kapanana kadar d\u0131\u015far\u0131 \u00e7\u0131kmamal\u0131d\u0131r (focus trapping).
\n*   Anlamsal HTML:<\/strong> Do\u011fru HTML elemanlar\u0131n\u0131 kullan\u0131n (\u00f6rn. dialog<\/code> etiketi) ve aria<\/code> nitelikleriyle (\u00f6rn. aria-modal=\"true\"<\/code>) destekleyin. z-index<\/code> g\u00f6rsel s\u0131ralamay\u0131 sa\u011flarken, eri\u015filebilirlik i\u00e7in DOM s\u0131ras\u0131 ve ARIA rolleri daha \u00f6nemlidir.<\/p>\n
CSS isolation: isolate<\/code> Kullan\u0131m\u0131<\/h3>\n
isolation: isolate<\/code> \u00f6zelli\u011fi, bir eleman\u0131 kendi y\u0131\u011f\u0131nlama ba\u011flam\u0131na zorlamak i\u00e7in kullan\u0131labilir. Bu, bazen karma\u015f\u0131k bir z-index<\/code> sorununu \u00e7\u00f6zmek i\u00e7in h\u0131zl\u0131 ve temiz bir yol olabilir, \u00e7\u00fcnk\u00fc eleman\u0131n \u00e7ocuklar\u0131n\u0131n z-index<\/code>‘leri art\u0131k ebeveynlerinin y\u0131\u011f\u0131nlama ba\u011flam\u0131ndan etkilenmez. Ancak, her zaman bu \u00f6zelli\u011fi kullanmak yerine, sorunun temel nedenini anlamak ve daha yap\u0131sal \u00e7\u00f6z\u00fcmler bulmak daha s\u00fcrd\u00fcr\u00fclebilirdir.<\/p>\n
Bu en iyi uygulamalar, z-index<\/code>‘in g\u00fcc\u00fcn\u00fc kontrol alt\u0131nda tutman\u0131za ve web projelerinizde daha \u00f6ng\u00f6r\u00fclebilir ve y\u00f6netilebilir bir katmanlama sistemi olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Modern CSS ve z-index’in Gelece\u011fi<\/h2>\n
CSS d\u00fcnyas\u0131 s\u00fcrekli geli\u015fiyor ve yeni d\u00fczenleme teknikleri ile \u00f6zellikler, z-index<\/code>‘in kullan\u0131m \u015feklini ve \u00f6nemini etkileyebiliyor. CSS Grid ve Flexbox gibi modern d\u00fczenleme mod\u00fclleri, elemanlar\u0131n konumland\u0131r\u0131lmas\u0131 ve s\u0131ralanmas\u0131 \u00fczerinde daha fazla kontrol sa\u011flayarak z-index<\/code>‘e olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 baz\u0131 senaryolarda azaltabiliyor.<\/p>\n
CSS Grid ve Flexbox ile Etkile\u015fim<\/h3>\n
*   Grid ve Flex \u00d6\u011felerinin Y\u0131\u011f\u0131nlama Ba\u011flam\u0131 Olu\u015fturmas\u0131:<\/strong> Daha \u00f6nce de belirtildi\u011fi gibi, bir flex veya grid kapsay\u0131c\u0131s\u0131n\u0131n \u00e7ocuklar\u0131, e\u011fer z-index<\/code> de\u011ferleri auto<\/code> d\u0131\u015f\u0131nda bir say\u0131sal de\u011fere ayarlanm\u0131\u015fsa, kendi y\u0131\u011f\u0131nlama ba\u011flamlar\u0131n\u0131 olu\u015ftururlar. Bu, i\u00e7 i\u00e7e ge\u00e7mi\u015f grid veya flex d\u00fczenlerinde z-index<\/code> davran\u0131\u015f\u0131n\u0131 etkileyebilir.
\n*   order<\/code> \u00d6zelli\u011fi:<\/strong> Flexbox ve Grid’deki order<\/code> \u00f6zelli\u011fi, elemanlar\u0131n g\u00f6rsel s\u0131ras\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r, ancak bu sadece ayn\u0131 y\u0131\u011f\u0131nlama ba\u011flam\u0131 i\u00e7indeki elemanlar\u0131n DOM s\u0131ras\u0131n\u0131 etkiler, z-index<\/code> de\u011ferlerini de\u011fil. order<\/code> \u00f6zelli\u011fi, elemanlar\u0131n normal ak\u0131\u015ftaki konumunu de\u011fi\u015ftirir, ancak Z ekseni s\u0131ralamas\u0131n\u0131 do\u011frudan etkilemez. z-index<\/code> hala Z ekseni s\u0131ralamas\u0131 i\u00e7in gereklidir.
\n*   grid-area<\/code> ve grid-template-areas<\/code>:<\/strong> Grid layout’ta elemanlar\u0131 \u00fcst \u00fcste bindirmek i\u00e7in grid-area<\/code> veya grid-template-areas<\/code> gibi \u00f6zellikler kullan\u0131labilir. Ayn\u0131 h\u00fccreyi birden fazla eleman i\u015fgal etti\u011finde, z-index<\/code> devreye girerek hangi eleman\u0131n \u00fcstte g\u00f6r\u00fcnece\u011fini belirler. Bu, z-index<\/code>‘in Grid ile birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair \u00f6nemli bir \u00f6rnektir.<\/p>\n
Modern CSS d\u00fczenleme teknikleri, elemanlar\u0131n yerle\u015fimini daha sezgisel hale getirerek, baz\u0131 durumlarda z-index<\/code>‘in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltabilir. \u00d6rne\u011fin, bir eleman\u0131 belirli bir konuma yerle\u015ftirmek i\u00e7in art\u0131k position: absolute<\/code> ve top<\/code>\/left<\/code> de\u011ferleri yerine Grid’in veya Flexbox’\u0131n hizalama \u00f6zelliklerini kullanmak daha kolay olabilir. Ancak, elemanlar\u0131 ger\u00e7ekten \u00fcst \u00fcste bindirmeniz gerekti\u011finde, z-index<\/code> hala vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\n
z-index<\/code>‘in Karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 Azaltabilecek Yeni Yakla\u015f\u0131mlar<\/h3>\n
*   Scoped CSS ve Component-Based Styling:<\/strong> React, Vue, Angular gibi modern JavaScript \u00e7er\u00e7eveleri ve CSS-in-JS k\u00fct\u00fcphaneleri, bile\u015fen tabanl\u0131 geli\u015ftirme yakla\u015f\u0131m\u0131n\u0131 benimser. Bu yakla\u015f\u0131mda, her bile\u015fen kendi stillerini kapsar. Bu, z-index<\/code> de\u011ferlerinin “global” olarak \u00e7ak\u0131\u015fma olas\u0131l\u0131\u011f\u0131n\u0131 azaltabilir, \u00e7\u00fcnk\u00fc her bile\u015fen kendi i\u00e7indeki katmanlamay\u0131 daha ba\u011f\u0131ms\u0131z bir \u015fekilde y\u00f6netebilir. Ancak, bile\u015fenler aras\u0131 etkile\u015fimde (\u00f6rne\u011fin bir modal\u0131n t\u00fcm sayfan\u0131n \u00fczerine \u00e7\u0131kmas\u0131 gerekti\u011finde) global z-index<\/code> stratejileri hala gereklidir.
\n*   CSS Custom Properties (De\u011fi\u015fkenler):<\/strong> CSS de\u011fi\u015fkenleri (--my-z-index: 100;<\/code>), z-index<\/code> de\u011ferlerini daha merkezi ve y\u00f6netilebilir hale getirmek i\u00e7in kullan\u0131labilir. Bu, yukar\u0131da bahsedilen anlamsal z-index<\/code> stratejilerini daha kolay uygulaman\u0131z\u0131 sa\u011flar.
\n*   container-queries<\/code> ve has()<\/code> se\u00e7icisi:<\/strong> Hen\u00fcz z-index<\/code>‘i do\u011frudan etkilemese de, gelecekteki CSS \u00f6zellikleri, elemanlar\u0131n ba\u011flamlar\u0131na g\u00f6re daha ak\u0131ll\u0131ca stilize edilmesine olanak tan\u0131yarak z-index<\/code> y\u00f6netimini dolayl\u0131 olarak kolayla\u015ft\u0131rabilir.<\/p>\n
z-index<\/code>‘in temel prensipleri ve y\u0131\u011f\u0131nlama ba\u011flam\u0131 kurallar\u0131, yak\u0131n gelecekte de\u011fi\u015fmeyecek gibi g\u00f6r\u00fcn\u00fcyor. Ancak, yeni CSS \u00f6zellikleri ve geli\u015ftirme yakla\u015f\u0131mlar\u0131, bu karma\u015f\u0131k \u00f6zelli\u011fi daha etkin bir \u015fekilde y\u00f6netmek i\u00e7in yeni yollar sunmaya devam edecektir. Geli\u015ftiricilerin, z-index<\/code>‘i tam potansiyeliyle kullanabilmeleri i\u00e7in y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n temelini ve modern CSS ile etkile\u015fimini anlamalar\u0131 kritik olmaya devam edecektir.<\/p>\n
Sonu\u00e7<\/h2>\n
CSS z-index<\/code> \u00f6zelli\u011fi, web tasar\u0131m\u0131nda g\u00f6rsel hiyerar\u015fiyi ve katmanlamay\u0131 y\u00f6netmek i\u00e7in kritik bir ara\u00e7t\u0131r. Ancak, y\u00fczeysel olarak basit g\u00f6r\u00fcnse de, ard\u0131ndaki “y\u0131\u011f\u0131nlama ba\u011flam\u0131” (stacking context) kavram\u0131 nedeniyle s\u0131kl\u0131kla yanl\u0131\u015f anla\u015f\u0131l\u0131r ve geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 sorunlara yol a\u00e7ar. Bu makalede, z-index<\/code>‘in temel \u00e7al\u0131\u015fma prensiplerini, position<\/code> \u00f6zelli\u011fi ile ayr\u0131lmaz ili\u015fkisini ve pozitif, negatif ve s\u0131f\u0131r de\u011ferlerinin anlamlar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceledik.<\/p>\n
En \u00f6nemlisi, bir y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n nas\u0131l olu\u015ftu\u011funu ve bu ba\u011flam\u0131n elemanlar\u0131n Z ekseni \u00fczerindeki s\u0131ralamas\u0131n\u0131 nas\u0131l izole ve ba\u011f\u0131ms\u0131z bir \u015fekilde etkiledi\u011fini derinlemesine ele ald\u0131k. opacity<\/code>, transform<\/code>, filter<\/code>, will-change<\/code> gibi bir\u00e7ok modern CSS \u00f6zelli\u011finin de y\u0131\u011f\u0131nlama ba\u011flam\u0131 olu\u015fturarak z-index<\/code> davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirebilece\u011fini g\u00f6rd\u00fck. Bu \u00f6zelliklerin varl\u0131\u011f\u0131, z-index<\/code> sorunlar\u0131n\u0131 giderirken sadece position<\/code> ve z-index<\/code>‘e odaklanmak yerine, eleman\u0131n t\u00fcm CSS \u00f6zelliklerini g\u00f6z \u00f6n\u00fcnde bulundurman\u0131n \u00f6nemini vurgular.<\/p>\n
Yayg\u0131n z-index<\/code> sorunlar\u0131n\u0131n ba\u015f\u0131nda position<\/code> eksikli\u011fi ve ebeveyn y\u0131\u011f\u0131nlama ba\u011flam\u0131 \u00e7at\u0131\u015fmalar\u0131 gelir. Bu sorunlar\u0131 te\u015fhis etmek ve \u00e7\u00f6zmek i\u00e7in taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 etkin bir \u015fekilde kullanmak, elemanlar\u0131n Computed Styles’\u0131n\u0131 ve HTML hiyerar\u015fisini incelemek hayati \u00f6neme sahiptir. Ayr\u0131ca, z-index<\/code> sava\u015flar\u0131ndan ka\u00e7\u0131nmak i\u00e7in anlamsal de\u011ferler kullanmak, de\u011ferler aras\u0131nda bo\u015fluk b\u0131rakmak ve bile\u015fen tabanl\u0131 bir z-index<\/code> y\u00f6netim stratejisi benimsemek gibi en iyi uygulamalar, projelerin s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r.<\/p>\n
Modern CSS d\u00fczenleme teknikleri olan Flexbox ve Grid, elemanlar\u0131n konumland\u0131r\u0131lmas\u0131nda yeni yakla\u015f\u0131mlar sunsa da, elemanlar\u0131 ger\u00e7ekten \u00fcst \u00fcste bindirme ihtiyac\u0131 oldu\u011funda z-index<\/code> hala vazge\u00e7ilmezdir. Gelecekteki CSS geli\u015fmeleri ve bile\u015fen tabanl\u0131 mimariler, z-index<\/code> y\u00f6netimini daha \u00f6ng\u00f6r\u00fclebilir hale getirebilir, ancak y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n temel mekani\u011fi web geli\u015ftiricileri i\u00e7in \u00f6\u011frenilmesi gereken bir temel olmaya devam edecektir.<\/p>\n
Sonu\u00e7 olarak, “kudretli” z-index<\/code> \u00f6zelli\u011fi, web aray\u00fczlerinde derinlik ve g\u00f6rsel hiyerar\u015fi olu\u015fturma g\u00fcc\u00fcn\u00fc sunar. Bu g\u00fcc\u00fc tam olarak kullanabilmek ve beklenmedik sorunlardan ka\u00e7\u0131nmak i\u00e7in, sadece z-index<\/code> de\u011ferlerini ezberlemek yerine, y\u0131\u011f\u0131nlama ba\u011flam\u0131n\u0131n inceliklerini anlamak ve bu karma\u015f\u0131k ama mant\u0131kl\u0131 kurallar b\u00fct\u00fcn\u00fcn\u00fc kavramak esast\u0131r. Bu anlay\u0131\u015fla, web geli\u015ftiricileri daha sa\u011flam, daha eri\u015filebilir ve daha g\u00f6rsel olarak \u00e7ekici kullan\u0131c\u0131 deneyimleri yaratabilirler.<\/p>\n","protected":false},"excerpt":{"rendered":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak\nGiri\u015f: Web Tasar\u0131m\u0131nda Katmanlaman\u0131n \u00d6nemi\nModern web tasar\u0131m\u0131, sad","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-33768","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak\" \/>\n<meta property=\"og:description\" content=\"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak Giri\u015f: Web Tasar\u0131m\u0131nda Katmanlaman\u0131n \u00d6nemi Modern web tasar\u0131m\u0131, sad\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T16:41:02+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak\",\"datePublished\":\"2025-11-06T16:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\"},\"wordCount\":4879,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\",\"name\":\"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-06T16:41:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak","og_description":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak Giri\u015f: Web Tasar\u0131m\u0131nda Katmanlaman\u0131n \u00d6nemi Modern web tasar\u0131m\u0131, sad","og_url":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-06T16:41:02+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"26 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak","datePublished":"2025-11-06T16:41:02+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/"},"wordCount":4879,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/","url":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/","name":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-06T16:41:02+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-z-index-ozelligi-katmanlama-ve-yiginlama-baglamlarini-anlamak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS z-index \u00d6zelli\u011fi: Katmanlama ve Y\u0131\u011f\u0131nlama Ba\u011flamlar\u0131n\u0131 Anlamak"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33768"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33768\/revisions"}],"predecessor-version":[{"id":33769,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33768\/revisions\/33769"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}