مقدمه‌ای بر Z-Index
در طراحی وب، یکی از مسائلی که گاهی به آن برمی‌خوریم، چگونگی ایجاد لایه‌بندی صحیح و ترتیب نمایش عناصر در صفحه است. این موضوع زمانی که از موقعیت‌دهی مطلق استفاده می‌کنیم، از اهمیت بیشتری برخوردار است. برای حل این مسئله، در CSS از خاصیتی به نام Z-Index استفاده می‌کنیم.
چه زمانی به Z-Index نیاز داریم؟
وقتی عناصر در یک صفحه به صورت نامنظم ثبت می‌شوند و یا روی هم قرار می‌گیرند، ممکن است با مشکلی مواجه شویم که باید ترتیب نمایش آن‌ها را تغییر دهیم. در اینجا، Z-Index به ما کمک می‌کند که عناصر را در لایه‌های متفاوتی قرار دهیم تا بتوانیم ترتیب نمایش آن‌ها را مدیریت کنیم.
استفاده ساده از Z-Index
استفاده از Z-Index بسیار ساده است. به سادگی می‌توانید خاصیت Z-Index را به عناصر HTML خود اضافه کنید و مقدار آن را تعیین کنید. عموماً، عناصری که مقدار Z-Index بزرگتری دارند، بالاتر از دیگر عناصر قرار می‌گیرند.
چالش‌های معمول
یکی از چالش‌های معمول در استفاده از Z-Index، فهمیدن نکاتی است که باعث می‌شود Z-Index به درستی عمل نکند. یک نکته کلیدی، این است که فقط عناصری که دارای موقعیت (Position) متفاوت از static هستند، تحت تأثیر Z-Index قرار می‌گیرند.
<html>
<head>
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 80px;
left: 80px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
شرح قدم به قدم کد
<html> کد HTML ما را از اینجا شروع می‌شود.
<head> این بخش شامل استایل CSS است که برای موقعیت‌دهی عناصر استفاده می‌شود.
.box1 اولین عنصر دارای موقعیت مطلق است و مکان و اندازه مشخصی دارد. رنگ پس‌زمینه قرمز و Z-Index برابر 1 دارد.
.box2 دومین عنصر دارای موقعیت مطلق نیز مکان و اندازه مشخصی دارد. رنگ پس‌زمینه آبی و Z-Index برابر 2 دارد. بنابراین بالاتر از
.box1 نمایش داده می‌شود.
<body> اینجا جایی است که عناصر ما درون صفحه نمایش داده می‌شوند.
<div class="box1"></div> این عنصر قرمز است که Z-Index کوچک‌تری دارد و زیر عنصر آبی نمایش داده می‌شود.
<div class="box2"></div> این عنصر آبی است که بالاتر نمایش داده می‌شود.
