لایه‌بندی (Z-index) در CSS
درس Position جعبه را جایش گذاشت. z-index سؤال بعدی را جواب می‌دهد: وقتی دو جعبه روی هم می‌افتند، کدام‌یک به خواننده نزدیک‌تر است؟ مثل برگه‌های کاغذ روی میز — برگهٔ بالاتر، پایین‌تر را می‌پوشاند. قبل از ساختن عددهای غول‌آسا، قانون‌های روزمره را یاد بگیرید.
جعبهٔ ابزار z-index
📊 z-index یک‌نگاهه
| مفهوم | کار روزمره |
|---|---|
z-index |
ترتیب رنگ‌شدن بین خواهرهای هم‌پوشان در یک stacking context |
| اول position | معمولاً position غیر از static لازم است (یا بعضی فرزندان چیدمان مدرن) |
| عدد بزرگ‌تر برنده | عدد بزرگ‌تر دیرتر رنگ می‌شود — روی بقیه دیده می‌شود |
auto |
پیش‌فرض — ترتیب سند و قوانین context پدر |
| Stacking context | یک «قفس» — فرزندان با هم مقایسه می‌شوند، نه با کل صفحه |
| مقیاس آرام | گام‌های کوچک (1، 2، 10) و نقش نام‌دار؛ نه مسابقهٔ 9999 |
z-index جعبه را چپ و راست نمی‌برد. فقط وقتی فضا مشترک است، می‌گوید چه کسی روی دیگری را می‌پوشاند.
نشان را بالای کارت بلند کنید
برای کارت خانهٔ دارای position بسازید، بعد نشان را با z-index معقول بالا ببرید. ترتیب DOM گاهی کافی است، ولی لایهٔ صریح نیت را خوانا می‌کند.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
پوشش بالای صفحه
مودال و کشو معمولاً بالای محتوای عادی می‌نشینند. پوشش دارای position را با عدد لایهٔ روشن جفت کنید — و محتوای صفحه را عمداً پایین‌تر نگه دارید.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
خواهرها را مقایسه کنید، نه کل دنیا را
بین خواهرها در یک context، z-index بزرگ‌تر برنده است. اگر عددها یکی باشند، معمولاً خواهر دیرتر در DOM روی می‌افتد. اول داخل یک پدر مقایسه کنید؛ بعد سراغ جنگ سراسری نروید.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
stacking context فرزند را قفس می‌کند
پدری که context خودش را دارد (مثلاً دارای position به‌علاوهٔ z-index) می‌تواند فرزندان را حبس کند. فرزند با z-index: 999 نمی‌تواند از لایه‌ای پایین‌تر از پدر، از قفس بیرون بپرد و خواهر بیرون را بپوشاند. لایهٔ پدر را درست کنید — فقط عدد فرزند را باد نکنید.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
عادت آرام z-index
نقش نام بگذارید (--layer-badge، --layer-modal) یا مقیاس کوچک به کار ببرید. مگر برای دیباگ، از 99999 دوری کنید. یادتان باشد: جای‌گذاری با position است؛ لایه‌بندی با z-index؛ پاک‌سازی float برای درس‌های بعد.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
خودتان امتحان کنید
- نشان absolute روی کارت relative بگذارید و
z-index: 2بدهید. - پس‌زمینه/مودال fixed با
z-index: 10بالای محتوای صفحه با1بسازید. - به دو خواهر absolute هم‌پوشان z-index متفاوت بدهید و جایشان را عوض کنید.
- فرزند با z-index بالا را داخل پدر با z-index پایین بگذارید — قفس را ببینید.
- یک
9999را به مقیاس custom property نام‌دار بازنویسی کنید.
اشتباه‌های رایج
- انتظار اثر از
z-indexروی جعبهٔ سادهٔstatic - جنگ با stacking context فقط با باد کردن عدد فرزند تو در تو
- مسابقه با
99999به‌جای مقیاس خوانا - این درس را مثل Position (جای‌گذاری) یا Display (نوع جعبه) دیدن
- استفاده از z-index برای ساختن ستون صفحه به‌جای ابزار چیدمان
جمع‌بندی
z-indexمی‌گوید وقتی جعبه‌ها روی هم می‌افتند کدام‌یک روی بقیه رنگ شود- معمولاً position غیر static لازم است (یا موارد خاص چیدمان)
- عدد بزرگ‌تر داخل همان stacking context برنده است
- context پدر می‌تواند فرزند را قفس کند — سطح درست را درست کنید
- مقیاس کوچک و نام‌دار را ترجیح دهید؛ float برای درس‌های نزدیک است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود