الفرق بين المراجعتين ل"CSS/z-index"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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> | ||
== أمثلة == | == أمثلة == | ||
| سطر 39: | سطر 41: | ||
شيفرة HTML:<syntaxhighlight lang="html"> | شيفرة HTML:<syntaxhighlight lang="html"> | ||
<div class="dashed-box"> | <div class="dashed-box"> | ||
| − | <span> | + | <span>الصندوق المتقطع</span> |
| − | <div class="gold-box"> | + | <div class="gold-box">الصندوق الذهبي</div> |
| − | <div class="green-box"> | + | <div class="green-box">الصندوق الأخضر</div> |
</div> | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 92: | سطر 94: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code>[[CSS/integer|<integer>]]</code> === |
قيمة عددية <code>[[CSS/length|<length>]]</code> سالبة أو موجبة تُحدِّد ترتيب العنصر على المحور Z، والقيم السالبة تعطي العنصر أقل أولوية في الترتيب. | قيمة عددية <code>[[CSS/length|<length>]]</code> سالبة أو موجبة تُحدِّد ترتيب العنصر على المحور Z، والقيم السالبة تعطي العنصر أقل أولوية في الترتيب. | ||
| − | === | + | === <code>auto</code> === |
ستضبط هذه القيمة ترتيب العنصر إلى نفس ترتيب العنصر الأب. وهذه هي القيمة الافتراضية. | ستضبط هذه القيمة ترتيب العنصر إلى نفس ترتيب العنصر الأب. وهذه هي القيمة الافتراضية. | ||
| سطر 102: | سطر 104: | ||
</syntaxhighlight> | </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]. | * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. | ||
المراجعة الحالية بتاريخ 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).