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

سه نوار رنگی قرار گرفته در بالای تصویر، مربوط به منوی سایت بوده است که قصد داشته ایم که ثابت باشد و بنابراین چنانچه کاربر به پایین صفحه برود، این منو همچنان در مکان خود ثابت باقی می ماند، اما همان طور که در شکل مشاهده می کنید، ستاره ها بر روی منو قرار گرفته اند. یعنی هنگامی که کاربر به پایین صفحه می رود، اگر بخشی که در زیر منو قرار می گیرد، دارای ستاره ها باشد، ستاره ها بر روی منو نمایش داده می شوند. ولی ما قصد داریم که ستاره ها در زیر منو پنهان شوند. مشکل از اینجا ناشی شده است که ستاره ها دارای اولویت بالاتر برای نمایش در صفحه هستند (برای قرارگیری بر روی سایر قسمت های صفحه). برای تغییر اولویت نمایش یک عنصر، باید برای مشخصه z-index آن، یک عدد دیگر (بزرگتر یا کوچکتر) انتخاب کنیم.

نحوه تعیین z-index برای یک عنصر، به صورت زیر می باشد (مثالی برای تگ div) :