الفرق بين المراجعتين لصفحة: «CSS/z-index»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>z-index</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>z-index</code>}}</noinclude> | ||
الخاصية <code>z-index</code> في CSS تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى. | الخاصية <code>z-index</code> في CSS تُحدِّد ترتيب العناصر التي يمكن أن يتغير مكانها (positioned elements) على المحور Z، فعندما تتداخل العناصر فستُحدِّد قيمة هذه الخاصية ما هو العنصر الذي سيظهر أعلى بقية العناصر، والعنصر الذي له قيمة z-index أكبر ما يمكن سيظهر في الأعلى. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* كلمة محجوزة */ | |||
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; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 92: | سطر 94: | ||
== البنية العامة == | == البنية العامة == | ||
=== | === <code>[[CSS/integer|<integer>]]</code> === | ||
قيمة عددية <code>[[CSS/length|<length>]]</code> سالبة أو موجبة تُحدِّد ترتيب العنصر على المحور Z، والقيم السالبة تعطي العنصر أقل أولوية في الترتيب. | قيمة عددية <code>[[CSS/length|<length>]]</code> سالبة أو موجبة تُحدِّد ترتيب العنصر على المحور Z، والقيم السالبة تعطي العنصر أقل أولوية في الترتيب. | ||
=== | === <code>auto</code> === | ||
ستضبط هذه القيمة ترتيب العنصر إلى نفس ترتيب العنصر الأب. وهذه هي القيمة الافتراضية. | ستضبط هذه القيمة ترتيب العنصر إلى نفس ترتيب العنصر الأب. وهذه هي القيمة الافتراضية. | ||
مراجعة 11:46، 4 يوليو 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>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).