ویژگی Opacity در Css
اردیبهشت ۱۸, ۱۴۰۳
ایجاد اشکال مختلف با Css
اردیبهشت ۱۹, ۱۴۰۳
در این قسمت از آموزش CSS، ویژگی Z-Index را برای شما توضیح میدهیم.
ویژگی Z-Index برای عناصر شمارههای منحصر به فردی را انتخاب میکند که به ترتیب میباشند. با استفاده از این ویژگی در طراحی سایت عنصر با شمارهی بزرگتر بالای عنصر دیگر قرار میگیرد. توجه داشته باشید که این ویژگی زمانی کاربرد دارد که خاصیت Position بر روی مقدار Relative و یا Absolute قرار گرفته باشد.
فرض کنید سه عنصر بصورت زیر داریم که با استفاده از position طوری مکان آنها را مشخص میکنیم که قسمتی از آنها روی هم قرار بگیرند:
HTML
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
CSS
#first, #second, #third { position: absolute; }
همانطور که مشاهده میکنید عناصر به ترتیبی که در کد نوشته شدهاند روی هم چیده شدهاند.
حال فرض کنید مقدار z-index را برای عنصر اول بصورت زیر تغییر دهیم:
#first { z-index: 1; }
توجه داشته باشید که چون z-index برای دو عنصر دیگر مشخص نشده است این بدین معنی است که آنها auto یا 0 در نظر گرفته می شوند پس مقدار 1 برای عنصر اول باعث میشود تا بالاتر از بقیه قرار بگیرد.
همینطور اگر برای عنصر دوم یک مقدار بیشتر در نظر بگیریم خواهیم داشت:
#second { z-index: 2; }
