آموزش خاصیت z-index در css

در این پست می خوام در مورد کاربرد دقیق Z-index در css و css3 توضیحاتی رو ارائه بدم...می دونم که این سوال بیشتر کاربران هستش مخصوصا تو سایت های دیگه هم این سوالاتو پرسیده بودن...فقط اول کار بگم که این خاصیت همونطور که از اسمش معلومه،به اشیای موجود در صفحه حالت 3بعدی میده،البته نه اون 3بعدی که من و شما میشناسیم...ادامه مطلب رو دنبال کن..

مثلا ما چند تا باکس،دکمه،textarea ویا هر چیز دیگه ای داریم که همشون هم باید خاصیت (position:absolute) رو داشته باشن در این صورت ممکنه ترتیبی که ما برای اونها در نظر گرفتیم به هم بخوره و شیئی که قرار بود در بالاترین قسمت(بالاترین قسمت از نظر 3بعدی)قرار بگیره،در پایین ترین قسمت و یا در جای دیگه ای قرار میگیره!!!

ولی با استفاده از خاصیت z-index که موقعیت اشیاء نسبت به هم رو میسنجه،ما میتونیم ترتیب قرارگیری اشیاء رو درست کنیم،مثلا اگه 4 تا باکس داشته باشیم،میتونیم با  z-index باکس دوم رو بالاتر ازهمه باکس ها قرار بدیم،به این صورت که ما میایم داخل استایلهای خودمون و به قسمت استایل او شیئی که می خواهیم روی بقیه قرار بگیره میریم و یه خاصیت به شکل زیر بهش اضافه میکنیم(مثلا):

<style>

.box1{background:#444; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:4;}

.box2{background:green; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:3;}

.box3{background:red; border-radius:5px; border:1px solid green; width:100px; height:100px; z-index:2;}

.box4{background:#900; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:1;}

</style>

همونطور که میبینید ما کاری کردیم که ترتیب باکس ها بر اساس اسمشون نباشه،مثلا باکس1 بالاتر از همه قرار بگیره و باکس4 پایین تر از همه باکس ها؛

نکته : باید به این نکته توجه کنید که خاصیت z-index هیچ واحدی ندارد..!

برای درک بهتر موضوع به تصویر زیر نگاه کنید: