الفرق بين المراجعتين لصفحة: «CSS/z-index»

المراجعة الحالية بتاريخ 16:57، 24 يوليو 2018

الخاصية 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>;

انظر أيضًا

صفحة الخاصية position التي تصف كيفية تموضع العنصر في المستند.
صفحة كل من الخاصيات top، و bottom، و right، و left المسؤولة عن تحديد أماكن العنصر.
صفحة الخاصية float التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.

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

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

@@ سطر 41: / سطر 41: @@
 شيفرة HTML:<syntaxhighlight lang="html">
 <div class="dashed-box">
-   <span>Dashed box</span>
+   <span>الصندوق المتقطع</span>
-   <div class="gold-box">Gold box</div>
+   <div class="gold-box">الصندوق الذهبي</div>
-   <div class="green-box">Green box</div>
+   <div class="green-box">الصندوق الأخضر</div>
 </div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 104: / سطر 104: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيفية تموضع العنصر في المستند.
+* صفحة كل من الخاصيات <code>[[CSS/top|top]]</code>، و <code>[[CSS/bottom|bottom]]</code>، و <code>[[CSS/right|right]]</code>، و <code>[[CSS/left|left]]</code> المسؤولة عن تحديد أماكن العنصر.
+* صفحة الخاصية <code>[[CSS/float|float]]</code> التي تحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].