ویژگی z-index در CSS برای کنترل ترتیب انباشتگی عناصر در یک صفحه وب زمانی که در یک متن‌بندی انباشته هستند، استفاده می‌شود. عناصر با مقدار z-index بالاتر جلوتر از عناصر با مقادیر پایین‌تر ظاهر می‌شوند.
ویژگی z-index می‌تواند با عناصر تعیین موقعیت استفاده شود که داخل عناصر دیگری با تعیین موقعیت قرار دارند.
مقادیر ممکن auto: مقدار پیش‌فرض. ترتیب انباشت برابر با آن از عنصر والدین است. <Integer>: یک عدد مثبت یا منفی. این مقدار سطح انباشتگی عنصر را به مقدار داده شده تنظیم می‌کند.
اعمال می‌شود به تمامی عناصر تعیین موقعیت.
سینتکس DOM:
object.style.zIndex = "2";به طور خلاصه، ویژگی z-index برای کنترل ترتیب انباشتگی عناصر استفاده می‌شود، به این ترتیب که انباشتگی عناصر می‌تواند توسط این ویژگی تنظیم شود تا عناصر مورد نظر در جلوترین لایه‌ها قرار بگیرند.
auto Value
در این بخش، توضیح داده شده که چگونه ویژگی z-index با مقدار auto در CSS عمل می‌کند. این مقدار z-index را به ترتیب انباشت بالاترین عنصر معتبر در جریان معمول تعیین می‌کند، به عبارت دیگر، z-index عنصر را برابر با ترتیب انباشت عنصر والدین می‌کند. این مقدار پیش‌فرض برای ویژگی z-index است.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: auto; /* تنظیم مقدار z-index به auto */
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 120px;
width: 200px;
background-color: #eae98f;
z-index: 1; /* تنظیم مقدار z-index به 1 */
text-align: center;
padding: 5px;
margin: 20px;
left: 30px;
top: 30px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>The element with z-index value of auto appears behind the element with the z-index value of 1.</p>
<div class="box1">
<span>CSS z-index: auto</span>
<div class="box2">
<span>CSS z-index: 1</span>
</div>
</div>
</body>
</html>در این مثال، دو مستطیل با کلاس‌های “box1” و “box2” تعریف شده‌اند. مستطیل با کلاس “box1” دارای مقدار z-index: auto است که به معنای تنظیم مقدار z-index برابر با ترتیب انباشتگی عنصر والدین است. مستطیل با کلاس “box2” دارای مقدار z-index: 1 است که به معنای تنظیم مقدار z-index برابر با 1 است. به عبارت دیگر، عنصر با مقدار z-index: auto در عمق پشت‌تر نسبت به عنصر با مقدار z-index: 1 قرار می‌گیرد.
with Positive Integer
در این بخش، توضیح داده شده که چگونه ویژگی z-index در CSS می‌تواند مقدار عدد صحیح مثبت داشته باشد. عنصر با مقدار عددی بزرگتر، در ترتیب انباشتگی، به عناصر با مقادیر کمتر جلوتر از خود نمایش داده می‌شود.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1; /* مقدار z-index با عدد صحیح مثبت 1 */
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2; /* مقدار z-index با عدد صحیح مثبت 2 */
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3; /* مقدار z-index با عدد صحیح مثبت 3 */
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>عنصر با مقدار z-index برابر با 1 پشت عنصرهایی با مقادیر z-index برابر با 2 و 3 قرار دارد.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>در این مثال، سه مستطیل با کلاس‌های “box1″، “box2” و “box3” تعریف شده‌اند. مستطیل با کلاس “box1” دارای مقدار z-index: 1 است، مستطیل با کلاس “box2” دارای مقدار z-index: 2 و مستطیل با کلاس “box3” دارای مقدار z-index: 3. بنابراین، مستطیل با کلاس “box3” جلوتر از هر دو مستطیل با کلاس “box1” و “box2” نمایش داده می‌شود، زیرا مقدار z-index آن بیشتر از آنهاست.
With Negative Integer
در این بخش، توضیح داده شده که چگونه مقادیر عددی منفی می‌توانند برای ویژگی z-index در CSS استفاده شوند. یک عنصر با مقدار z-index منفی، زیر عناصر با مقادیر بیشتر در ترتیب انباشت قرار می‌گیرد.
<html>
<head>
<style>
.box1 {
position: absolute;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3; /* مقدار z-index با عدد صحیح منفی -3 */
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: absolute;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2; /* مقدار z-index با عدد صحیح منفی -2 */
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: absolute;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1; /* مقدار z-index با عدد صحیح منفی -1 */
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<p>عنصر با مقدار z-index برابر با -3 پشت عنصرهایی با مقادیر z-index برابر با -2 و -1 قرار دارد.</p>
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</body>
</html>در این مثال، سه مستطیل با کلاس‌های “box1″، “box2” و “box3” تعریف شده‌اند. مستطیل با کلاس “box1” دارای مقدار z-index: -3 است، مستطیل با کلاس “box2” دارای مقدار z-index: -2 و مستطیل با کلاس “box3” دارای مقدار z-index: -1. بنابراین، مستطیل با کلاس “box1” جلوتر از هر دو مستطیل با کلاس “box2” و “box3” نمایش داده می‌شود، زیرا مقدار z-index آن کوچکتر از آنهاست.
With Sticky Position
این بخش نحوه استفاده از ویژگی z-index در CSS به همراه موقعیت چسبنده (sticky) را نشان می‌دهد. ویژگی z-index برای کنترل ترتیب انباشتگی عناصر با موقعیت چسبنده به کار می‌رود، تا آنها به ثابت ماندن در مکانی که به عنوان صفحه اسکرول می‌شود، کمک کند.
<html>
<head>
<style>
.box1 {
position: sticky;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1; /* مقدار z-index با عدد صحیح مثبت 1 */
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 80px;
}
.box2 {
position: sticky;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2; /* مقدار z-index با عدد صحیح مثبت 2 */
text-align: center;
padding: 5px;
margin: 10px;
left: 40px;
top: 200px;
}
.box3 {
position: sticky;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3; /* مقدار z-index با عدد صحیح مثبت 3 */
text-align: center;
padding: 5px;
margin: 10px;
left: 70px;
}
</style>
</head>
<body>
<p>حرکت نشانگر ماوس به سمت بالا برای مشاهده اثر.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html> در این مثال، سه مستطیل با موقعیت چسبنده (sticky) و کلاس‌های “box1″، “box2” و “box3” تعریف شده‌اند. هر کدام از این مستطیل‌ها دارای یک مقدار z-index مثبت مخصوص به خود هستند. با حرکت نشانگر ماوس به سمت بالا، مستطیل‌ها که به موقعیت چسبنده تغییر موقعیت داده‌اند، ثابت خواهند ماند و ترتیب انباشتگی آنها بر اساس مقادیر z-index تعیین خواهد شد.
With Fixed Position
در این بخش، نحوه استفاده از ویژگی z-index به همراه موقعیت ثابت (fixed) برای حفظ یک عنصر در بالای محتوا هنگامی که کاربر پایین صفحه اسکرول می‌کند، نشان داده شده است.
<html>
<head>
<style>
.container {
position: relative;
height: 350px;
}
.box1 {
position: fixed;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: -3; /* مقدار z-index با عدد صحیح منفی 3 */
text-align: center;
padding: 3px;
left: 10px;
top: 10px;
}
.box2 {
position: fixed;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: -2; /* مقدار z-index با عدد صحیح منفی 2 */
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: fixed;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: -1; /* مقدار z-index با عدد صحیح منفی 1 */
text-align: center;
padding: 5px;
margin: 20px;
left: 50px;
top: 50px;
}
h3 {
margin-top: 320px;
}
</style>
</head>
<body>
<h3>به پایین محتوا اسکرول کنید تا اثر را مشاهده کنید.</h3>
<div class="container">
<div class="box1">
CSS z-index: -3
</div>
<div class="box2">
CSS z-index: -2
</div>
<div class="box3">
CSS z-index: -1
</div>
</div>
</body>
</html> در این مثال، سه مستطیل با موقعیت ثابت (fixed) و کلاس‌های “box1″، “box2” و “box3” تعریف شده‌اند. هر کدام از این مستطیل‌ها دارای یک مقدار z-index منفی مخصوص به خود هستند. با اسکرول پایین محتوا، مستطیل‌ها ثابت خواهند ماند و ترتیب انباشتگی آنها بر اساس مقادیر z-index تعیین خواهد شد، به طوری که مستطیل با مقدار z-index: -1 در بالا قرار خواهد گرفت و مستطیل با مقدار z-index: -3 در پایین‌ترین لایه قرار خواهد گرفت.
With Static Position
در این بخش، نحوه استفاده از ویژگی z-index با موقعیت استاتیک (static) نشان داده شده است. در واقع، ویژگی z-index بر ترتیب انباشتگی عناصری که دارای موقعیت static هستند، تأثیری ندارد.
<html>
<head>
<style>
.box1 {
position: static;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1; /* مقدار z-index با عدد صحیح مثبت 1 */
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: static;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2; /* مقدار z-index با عدد صحیح مثبت 2 */
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: static;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3; /* مقدار z-index با عدد صحیح مثبت 3 */
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>ویژگی z-index برای ترتیب انباشتگی عناصری که موقعیت static دارند، تأثیری ندارد.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html> در این مثال، سه مستطیل با موقعیت static و کلاس‌های “box1″، “box2” و “box3” تعریف شده‌اند. هر کدام از این مستطیل‌ها دارای یک مقدار z-index مثبت مخصوص به خود هستند. با این حال، این مقادیر z-index برای ترتیب انباشتگی آنها تأثیری ندارد، زیرا موقعیت آنها به صورت استاتیک (static) تعریف شده است.
With Relative Position
این بخش نحوه عملکرد ویژگی z-index در حالتی که عناصر دارای موقعیت نسبی (relative) هستند را نشان می‌دهد.
<html>
<head>
<style>
.box1 {
position: relative;
height: 200px;
width: 280px;
background-color: #f0baba;
z-index: 1;
text-align: center;
padding: 3px;
margin: 10px;
left: 10px;
top: 10px;
}
.box2 {
position: relative;
height: 140px;
width: 220px;
background-color: #eae98f;
z-index: 2;
text-align: center;
padding: 5px;
margin: 10px;
left: 30px;
top: 30px;
}
.box3 {
position: relative;
height: 90px;
width: 160px;
background-color: #b7c8ae;
z-index: 3;
text-align: center;
padding: 5px;
margin: 10px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<p>ویژگی z-index عنصر را نسبت به موقعیت اصلی خود در جریان سند موقعیت می‌دهد اگر موقعیت نسبی باشد.</p>
<div class="box1">
CSS z-index: 1
</div>
<div class="box2">
CSS z-index: 2
</div>
<div class="box3">
CSS z-index: 3
</div>
</body>
</html>در این مثال، عناصر با کلاس‌های “box1″، “box2” و “box3” دارای موقعیت نسبی (relative) هستند. ویژگی z-index برای قرار دادن عناصر نسبت به موقعیت اصلی آنها در جریان سند استفاده می‌شود. به این معنی که عنصری با مقدار z-index: 3 در بالاترین لایه و عنصری با مقدار z-index: 1 در پایین‌ترین لایه قرار خواهد گرفت.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام