CSS/z-index

الخاصية z-index في CSS تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى.

بطاقة الخاصية

القيمة الابتدائية	auto
تُطبَّق على	العناصر التي يمكن أن يتغير مكانها (positioned elements).
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* كلمة محجوزة */
z-index: auto;

/* <integer> قيم عددية */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* الأرقام السالبة لها أدنى ترتيب */

/* القيم العامة */
z-index: inherit;
z-index: initial;
z-index: unset;

أمثلة

سنستعرض في المثال الآتي ثلاثة عناصر <div> لها خاصيات z-index لترتبها على المحور Z بترتيبٍ يختلف عن الترتيب الافتراضي في HTML (أي آخر عنصر يُعرَّف في HTML سيظهر أعلى من البقية).

شيفرة HTML:

<div class="dashed-box">
  <span>الصندوق المتقطع</span>
  <div class="gold-box">الصندوق الذهبي</div>
  <div class="green-box">الصندوق الأخضر</div>
</div>

شيفرة CSS:

.dashed-box { 
  z-index: 1;
  position: relative;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
  padding: 1em;
}
.gold-box { 
  z-index: 3;
  position: absolute;
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
  padding: 1em;
}
.green-box { 
  z-index: 2;
  position: absolute;
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
  padding: 1em;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	3.0	4.0	4.0	1.0

البنية العامة

<integer>

قيمة عددية <length> سالبة أو موجبة تُحدِّد ترتيب العنصر على المحور Z، والقيم السالبة تعطي العنصر أقل أولوية في الترتيب.

auto

ستضبط هذه القيمة ترتيب العنصر إلى نفس ترتيب العنصر الأب. وهذه هي القيمة الافتراضية.

البنية الرسمية

z-index: auto | <integer>;

مصادر ومواصفات

• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.