با استفاده از z-index

اولین مقاله از این راهنما، Stacking بدون خاصیت z-index، نحوه چیدمان انباشتگی به صورت پیش فرض را توضیح می دهد. اگر می خواهید یک مرتبه سفارشی ایجاد کنید، می توانید از ویژگی z-index در یک عنصر موقعیت یافته استفاده کنید.

ویژگی z-index را می توان با یک مقدار صحیح (مثبت، صفر یا منفی) مشخص کرد که موقعیت عنصر را در امتداد یک محور z خیالی نشان می دهد. اگر با اصطلاح "محور z" آشنا نیستید، صفحه را به صورت پشته ای از لایه ها تصور کنید که هر کدام دارای یک عدد هستند. لایه ها به ترتیب عددی، با اعداد بزرگتر بالای اعداد کوچکتر ارائه می شوند (X نشان دهنده یک عدد صحیح مثبت دلخواه است):

توجه داشته باشید:

• هنگامی که ویژگی z-index مشخص نشده باشد، عناصر در لایه رندر پیش فرض (لایه 0) رندر می شوند.
• اگر چندین عنصر مقدار z-index یکسانی دارند (یعنی روی یک لایه قرار می گیرند)، قوانین پشته بندی توضیح داده شده در بخش Stacking بدون خاصیت z-index اعمال می شوند.

مثال

در این مثال، ترتیب انباشته شدن لایه ها با استفاده از z-index دوباره مرتب می شود. شاخص z از DIV #5 هیچ تأثیری ندارد زیرا یک عنصر موقعیت یافته نیست.

HTML

بخش id="abs1"> قوی>DIV شماره 1قوی> br />موقعیت: مطلق;br />z-index: 5;بخش> بخش id="rel1"> قوی>DIV شماره 2قوی> br />موقعیت: نسبی;br />z-index: 3;بخش> بخش id="rel2"> قوی>DIV شماره 3قوی> br />موقعیت: نسبی;br />z-index: 2;بخش> بخش id="abs2"> قوی>DIV شماره 4قوی> br />موقعیت: مطلق;br />z-index: 1;بخش> بخش id="sta1"> قوی>DIV شماره 5قوی> br />بدون موقعیتbr />z-index: 8;بخش> 

CSS

بخش  لایه گذاری:10 پیکسل; کدورت:0. 7; متن تراز کردن:مرکز; > قوی  فونت-خانواده:بدون دندانه; > #abs1  z-index: 5; موقعیت:مطلق; عرض:150 پیکسل; ارتفاع:350 پیکسل; بالا:10 پیکسل; ترک کرد:10 پیکسل; مرز:1px خط تیره #900; رنگ پس زمینه:#fdd; > #rel1  z-index: 3; ارتفاع:100 پیکسل; موقعیت:نسبت فامیلی; بالا:30 پیکسل; مرز:1px با علامت #696; رنگ پس زمینه:#cfc; لبه:0px 50px 0px 50px; > #rel2  z-index: 2; ارتفاع:100 پیکسل; موقعیت:نسبت فامیلی; بالا:15 پیکسل; ترک کرد:20 پیکسل; مرز:1px با علامت #696; رنگ پس زمینه:#cfc; لبه:0px 50px 0px 50px; > #abs2  z-index: 1; موقعیت:مطلق; عرض:150 پیکسل; ارتفاع:350 پیکسل; بالا:10 پیکسل; درست:10 پیکسل; مرز:1px خط تیره #900; رنگ پس زمینه:#fdd; > #sta1  z-index: 8; ارتفاع:70 پیکسل; مرز:1px با خط تیره #996; رنگ پس زمینه:#ffc; لبه:0px 50px 0px 50px; > 

نتیجه

همچنین ببینید

• انباشتن بدون خاصیت z-index: قوانین انباشتگی که در صورت عدم استفاده از z-index اعمال می شود.
• انباشت با بلوک های شناور: چگونه عناصر شناور با انباشت دستگیر می شوند.
• زمینه انباشت: یادداشت هایی در مورد زمینه انباشت.
• زمینه انباشت مثال 1: سلسله مراتب HTML 2 سطح ، Z-Index در آخرین سطح
• زمینه انباشت مثال 2: سلسله مراتب HTML 2 سطح ، Z-Index در تمام سطوح
• زمینه انباشت مثال 3: سلسله مراتب HTML سطح 3 ، Z-Index در سطح دوم

با این صفحه مشکل محتوا پیدا کرده اید؟

• صفحه را در GitHub ویرایش کنید.
• گزارش محتوا را گزارش دهید.
• منبع را در GitHub مشاهده کنید.

این صفحه آخرین بار در 21 فوریه 2023 توسط همکاران MDN اصلاح شد.

طرح شما برای اینترنت بهتر.< Pan> انباشت با بلوک های شناور: چگونه عناصر شناور با انباشت کنترل می شوند.