Pro

بازرس Z-Index

بازرس Z-Index ترتیب چیدمان کامل هر عنصر در یک صفحه وب را آشکار می‌کند. هر عنصر با مقدار z-index مستقیماً روی صفحه برجسته و برچسب‌گذاری می‌شود، و یک پانل نقشه لایه مرتب‌شده همه لایه‌های z-index را نشان می‌دهد.

افزودن به Chrome افزودن به Edge افزودن به FireFox

باگ‌های z-index از ناامیدکننده‌ترین مشکلات در CSS هستند. یک modal که باید بالای همه چیز ظاهر شود پشت یک sidebar پنهان است. بازرس Z-Index نامرئی را مرئی می‌کند. هر عنصر با z-index صریح یک overlay رنگی دریافت می‌کند. مهم‌تر از همه، ابزار مرزهای stacking context را شناسایی می‌کند.

پیش‌نمایش زنده

example.com/app-dashboard

Stacking layers visualization

z-index: 1 · main-content

z-index: 10 · sidebar

z-index: 100 · modal-backdrop

z-index: 999 · modal-dialog

Confirm deletion?

z-index: 9999

tooltip

Z-Index Layers

5 layers · 2 stacking contexts

9999 .tooltip fixed

999 .modal-dialog fixed

100 .modal-backdrop fixed

10 .sidebar relative

1 .main-content relative

Stacking Contexts

html (root)
.modal-backdrop (opacity: 0.5)

ویژگی‌های کلیدی

تجسم لایه روی صفحه

هر عنصر با مقدار z-index یک overlay رنگی نیمه‌شفاف و badge برچسب با عدد z-index دریافت می‌کند. مقادیر بالاتر رنگ‌های گرم‌تر (قرمزها) دارند، مقادیر پایین‌تر رنگ‌های سردتر (آبی‌ها).

پانل نقشه لایه مرتب‌شده

یک پانل جانبی همه مقادیر z-index یافت‌شده در صفحه را از بالاترین تا پایین‌ترین مرتب می‌کند. هر آیتم مقدار z-index، selector یا نام کلاس CSS و ویژگی position را نشان می‌دهد.

شناسایی Stacking Context

هر مرز stacking context در صفحه و ویژگی CSS که آن را ایجاد می‌کند — position: relative/absolute با z-index، transform، opacity < 1، filter، will-change، isolation: isolate — را شناسایی می‌کند.

لینک‌دهی دوطرفه عنصر

روی هر لایه در پانل کلیک کنید تا عنصر مربوطه در صفحه برجسته و scroll شود. یا روی هر عنصر برجسته در صفحه کلیک کنید تا در پانل نقشه لایه پیدا شود.

شاخص‌های ویژگی Position

هر آیتم لایه مقدار CSS position عنصر (static، relative، absolute، fixed، sticky) را نشان می‌دهد چون z-index فقط روی عناصر positioned اعمال می‌شود.

زنجیره Parent Context

برای هر عنصر انتخاب‌شده، زنجیره کامل stacking context های ancestor را تا root ببینید. دقیقاً بفهمید کدام ancestor scope z-index عنصر را محدود می‌کند.

موارد استفاده رایج

اشکال‌زدایی نمایش Modal / Overlay

یک modal با z-index: 9999 پشت sidebar با z-index: 10 پنهان است. چطور؟ بازرس Z-Index نشان می‌دهد parent مودال position: relative دارد و یک stacking context با z-index: 1 ایجاد می‌کند.

رفع چیدمان منوی Dropdown

یک منوی dropdown با باز شدن پشت بخش بعدی ناپدید می‌شود. بازرس نشان می‌دهد container منو overflow: hidden دارد یا بخش بعدی z-index بالاتری دارد.

پاک‌سازی تورم Z-Index

با گذشت زمان مقادیر z-index انباشته می‌شوند: 10، 100، 999، 9999، 99999. نقشه لایه همه مقادیر را مرتب‌شده نشان می‌دهد.

درک چیدمان Widget های شخص ثالث

ویجت‌های چت، بنرهای کوکی و overlayهای analytics عناصری با مقادیر z-index بالا تزریق می‌کنند. بازرس Z-Index دقیقاً نشان می‌دهد چه مقادیری استفاده می‌کنند.

ممیزی استفاده از Stacking Context

همه stacking context های صفحه را بررسی کنید تا موارد غیرضروری را پیدا کنید. Transformها، filterها و opacity اعمال‌شده برای افکت‌های بصری ممکن است به‌طور ناخواسته stacking context ایجاد کنند.

نحوه استفاده

فعال‌سازی بازرس Z-Index

داک شناور DevSuite Pro را باز کنید و روی آیکون بازرس Z-Index کلیک کنید. ابزار صفحه را اسکن کرده و هر عنصر با مقدار z-index و هر مرز stacking context را شناسایی می‌کند.

مشاهده تجسم لایه

عناصر با مقادیر z-index overlayهای رنگی مستقیماً روی صفحه دریافت می‌کنند. مقادیر بالاتر با رنگ‌های گرم‌تر، مقادیر پایین‌تر با رنگ‌های سردتر.

مرور نقشه لایه

پانل جانبی را باز کنید تا همه لایه‌های z-index از بالاترین تا پایین‌ترین مرتب‌شده ببینید.

بررسی Stacking Context ها

بخش «Stacking Contexts» پانل هر عنصری که یک stacking context جدید ایجاد می‌کند و ویژگی CSS مسئول را فهرست می‌کند.

ردیابی زنجیره Context

روی هر عنصر کلیک کنید تا زنجیره stacking context ancestor آن را ببینید. زنجیره را به سمت بالا دنبال کنید تا مرز context که مشکل چیدمان را ایجاد می‌کند پیدا کنید.