CSS/z-index

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

/* كلمة محجوزة */
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;

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

أمثلة

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

شيفرة HTML:

<div class="dashed-box">
  <span>Dashed box</span>
  <div class="gold-box">Gold box</div>
  <div class="green-box">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)‎.