سرخط خبرها

z-index چیست؟

در این قسمت از آموزش CSS ، ویژگی Z-Index را برای شما توضیح می دهیم.
ویژگی Z-Index برای عناصر شماره های منحصر به فردی را انتخاب می کند که به ترتیب می باشند.با استفاده از ویژگی z-index عنصر با شماره ی بزرگتر بالای عنصر دیگر قرار می گیرد.

توجه داشته باشید که این ویژگی زمانی کاربرد دارد که خاصیت Position بر روی مقدار Relative و fixed یا Absolute قرار گرفته باشد.

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

زمانی که عناصر روی هم قرار میگیرند با ویژگی z-index میتوانید اولویت نمایش را برای عناصر مشخص کنید

خاصیت z-index ترتیب قرارگیری عناصر HTML بر روی هم را تعیین می کند. “stack level” یا ترتیب قرارگیری عناصر بر روی هم اشاره به موقعیت عنصر بر روی محور Z دارد (همانطور که در CSS محور X یا محور Y داریم). هرچه مقدار z-index یک عنصر بیشتر باشد به معنی رو بودن عنصر نسبت به بقیه عناصر است. این روی هم قرارگیری عناصر به صورت عمود بر روی صفحه است.

 

وقتی دو یا چند تا المنت توی صفحه طوری قرار میگیرند که قسمت های از آنها با هم از نظر مکان مشترک میشون و شما میتونید با z-index مشخص کنید کدوم یک از اون المنت ها نشون داده بشن و یا در واقع کدون بالا تر از اون یکیه این توضیح خودمونی خیلی هم بی راه نیست چون در واقع z-index بعد سوم صفحست اگر صفحه رو دو بعدی فرض کنیم که شامل x , y و بعد سوم z است
برای درک بهتر خاصیت z-index به این تصویر توجه کنید:

z-index چیست؟

 

استفاده از خاصیت z-index گاهی سبب سردرگمی طراحان وب می شود چرا که این خاصیت تنها وقتی کار می کند که در عناصر خاصیت position استفاده شده باشد، به این ترتیب شما باید از یکی از این خاصیت ها همراه با خاصیت z-index استفاده کنید:

*z-index فقط در مواقعی که از ویژگیهای زیر استفاده شود،میتواند مورد استفاده قرار گیرد

position: absolute;

position: relative;

position: fixed;

*از خاصیت z-index تمامی مرورگرها پشتیبانی می کنند.

 

مثال :

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:

از این خاصیت ها استفاده می کنیم:

 

#gray{position: relative;z-index: 1;}

#blue{position: relative:z-index: 2;}

#yellow{position: relative;z-index: 3;}

z-index چیست؟

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

 

P{
Position: absolute;
z-index: -1;
}

 

html>
<head>
<style type=”text/css”>
div{
width: 200px;
height:120px;
position: absolute;
}
</style>
</head>
<body>
<div style=”background-color:#660033;top:20px;left:20px;z-index:0″></div>
<div style=”background-color:#990033;top:100px;left:50px;z-index:1″></div>
<div style=”background-color:#993333;top:180px;left:80px;z-index:2″></div>
</body>
</html>

موقعیت position در Css

QR Code For: z-index چیست؟

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.