این آموزش در تاریخ ۱۴۰۰/۱۲/۰۲ آپدیت شده است.
آموزش ویژگی z-index در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی z-index در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی z-index در CSS
ویژگی z-index در CSS از اون ویژگی هایی هستش که ممکنه یجایی گیرتون بندازه و حسابی اذیتتون کنه، بطور کلی ما با استفاده از این ویژگی میتونیم ترتیب قرار گیری تگ هارو مشخص کنیم.
در یه کلام و بطور کلی بدونید با استفاده از این ویژگی میتونیم تگ هارو بیاریم بالاتر از دیگر تگ ها به نمایش درآوریم، مثلا یه عکس رفته زیر یه عکس دیگه و ما میخوایم اون عکس رو بیاریم بالاتر از اون عکس دیگه نشون بدیم.
خب خودتونم میدونید که بصورت پیش فرض تگ ها Position ( یا موقعیت قرارگیریشون ) در حالت Static می باشد، این یعنی به ترتیب هرتگی که در صفحه ایجاد میکنیم همونجورم در خروجی نمایش داده میشه.
حال اگه از Position ( موقعیت ) مطلق یا ( Absolute ) بروی چندین عنصر استفاده نماییم، عناصر میوفتن روی همدیگه و به اصطلاح میگیم روی همدیگه انباشته میشوند.
در نتیجه عناصر زیر همدیگه گم میشن، این درحالیه که مثلا شما میخواید فلان عنصر بالاتر از همه قرار بگیرد ، پس در این مواقع به راحتی و با استفاده از ویژگی z-index متونید اون عنصر رو بیارید بالاتر از بقیه عناصر در صفحه.
یک تگ حتما باید موقعیت دار مثه absolute یا fixed و.. باشه تا ویژگی z-index بتونه روش اثر داشته باشد در غیراینصورت ویژگی z-index بی اثر خواهد بود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی z-index را در زبان CSS مشاهده نمایید.
شرح مشکل :
آقا ما یه منو داریم وقتی اسکرول میکنیم بسمت پایین ، عکس میاد و میوفته روی منو، [ خب نباید اینجوری بشه ]
|
1 2 3 4 |
.MyImg{ position: relative; z-index: 1; } |
راه حل :
باید با استفاده از همین ویژگی z-index کاری کنیم که منو بیاد بالاتر از بقیه تگ های داخل صفحه ، خیلی راحت یه مقدار عددی بهش میدیم که بیاد بالاتر از همه [ تموم شد رفت ] ( حواستون باشه ،مقدار باید بیشتر از مقدار z-index دیگر تگ ها باشه )
|
1 2 3 4 5 6 7 |
/* باید عددش از مال عکس بیشتر باشه */ ul.MyMenu{ z-index: 10; } .MyImg{ z-index: 1; } |
مثال شماره ۲ : بردن عکس زیر متن ( استفاده از مقدار منفی )
|
1 2 3 |
.MyBox img{ z-index: -1; } |
مثال شماره ۳ : انباشته کردن چندین عکس روهمدیگه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.image-1{ position: absolute; top: 0; left: 0; border: 2px black solid; } .image-2{ position: absolute; top: 20px; left: 15px; border: 2px black solid; } .image-3{ position: absolute; top: 40px; left: 30px; border: 2px black solid; } .image-4{ position: absolute; top: 60px; left: 45px; border: 2px black solid; } |
Free-Learn
جدول مشخصات ویژگی z-index در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.zIndex=”100″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی z-index در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| z-index | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
z-index: auto|number|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی z-index در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – بصورت خودکار توسط مرورگرها مشخص میشود |
| number | استفاده از یک عدد مثبت یا منفی عدد مثبت تگ رو میاره بالا و منفی میبره زیر |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- ترتیب قرار گرفتن و z-index دادن به عناصر دارای اولویت می باشد، بفرض مثال اگه ۳ تا عنصر در صفحه داشته باشیم و هر یک از عناصر هم z-index به شکل زیر داشته باشند :
|
1 2 3 4 5 6 7 8 9 10 11 |
.box1{ z-index: 1; } .box2{ z-index: 2; } .box3{ z-index: 3; } |
- طبق دستورات بالا، باکس شماره ۳ ( box3 ) بالاتر از بقیه عناصر در صفحه قرار خواهد گرفت و بعد از اون باکس شماره ۲ هست که بالاتر قرار خواهد گرفت، یعنی اگر باکس شماره ۳ حذف شد، این باکس شماره ۲ هست که میاد بالا.
- حال اگه بخوایم باکس شماره ۱ رو بیاریم بالاتر از همه باکس ها، باید z-index باکس شماره ۱ رو بیشتر از عدد ۳ ( که متعلق به باکس شماره ۳ هس ) یا هم هرعددی باشه فرقی نمیکنه، فقط باید عدد بزرگی باشه مثله :
|
1 2 3 4 5 6 7 8 9 10 11 |
.box1{ z-index: 4; } .box2{ z-index: 2; } .box3{ z-index: 3; } |
- اگه یه سایتی بود که نمیدونستید کجا از z-index استفاده شده و درکل نمیدونستید چه عددی باید بدید، نگران نباشید فقط یه عدد بزرگ بدید مثلا ۹۹۹۹ اگه بازم نیومد بالا ۹۹۹۹۹ بدید ، اگه بازم نیومد بالا ۹۹۹۹۹۹ بدید.
