طرح‌بندی CSS - ویژگی z-index

z-index تحدد خاصية z-index تسلسل الهرم للعنصر.

خصوصية z-index

عندما يتم تحديد العنصر، قد يتداخل مع العناصر الأخرى.

z-index يحدد خاصية z-index تسلسل الهرم للعنصر (ما هو العنصر الذي يجب أن يكون في المقدمة، وما هو العنصر الذي يجب أن يكون في الخلفية).

تسلسل الهرم للأعمدة يمكن أن يكون عددًا إيجابيًا أو سالبًا:

هذا هو عنوان

بسبب موقع الصورة z-index محدد على -1، لذا سيتم وضعه خلف النص.

مثال

img {
  موقع: مطلق;
  السطر الأيسر: 0px;
  العمود العلوية: 0px;
  z-index: -1;
}

جرب بنفسك

ملاحظة:z-index يستخدم فقطعناصر التحديد(موقع: مطلقوموقع: نسبيوموقع: ثابت أو موقع: محكوم) وعنصر مرن(عرض: مرن; النص المباشر للعنصر).

مثال آخر لـ z-index

مثال

في هذا المثال، نرى أن العناصر ذات التسلسل الهرمي الأعلى دائمًا تكون في الأعلى من العناصر ذات التسلسل الهرمي الأدنى:

<html>
<head>
<style>
.container {
  موقع: نسبي;
}
.black-box {
  موقع: نسبي;
  z-index: 1;
  الحدود: 2px سماكة أسود;
  الارتفاع: 100px;
  الفرق: 30px;
}
.gray-box {
  موقع: مطلق;
  z-index: 3;
  خلفية: lightgray;
  الارتفاع: 60px;
  عرض: 70%;
  السطر الأيسر: 50px;
  العمود العلوية: 50px;
}
.green-box {
  موقع: مطلق;
  z-index: 2;
  خلفية: lightgreen;
  عرض: 35%;
  الجانب الأيسر: 270px;
  الإرتفاع: -15px;
  الارتفاع: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">صندوق أسود</div>
  <div class="gray-box">صندوق رمادي</div>
  <div class="green-box">صندوق أخضر</div>
</div>
</body>
</html>

جرب بنفسك

بدون z-index

إذا كانت هناك عناصر تحديد موقع بدون تحديد z-index تتداخلفي حالة تعريف HTML في آخر مكانالنص سيظهر في الأعلى.

مثال

مثل المثال السابق، ولكن هنا لم يتم تحديد z-index:

<html>
<head>
<style>
.container {
  موقع: نسبي;
}
.black-box {
  موقع: نسبي;
  الحدود: 2px سماكة أسود;
  الارتفاع: 100px;
  الفرق: 30px;
}
.gray-box {
  موقع: مطلق;
  خلفية: lightgray;
  الارتفاع: 60px;
  عرض: 70%;
  السطر الأيسر: 50px;
  العمود العلوية: 50px;
}
.green-box {
  موقع: مطلق;
  خلفية: lightgreen;
  عرض: 35%;
  الجانب الأيسر: 270px;
  الإرتفاع: -15px;
  الارتفاع: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">صندوق أسود</div>
  <div class="gray-box">صندوق رمادي</div>
  <div class="green-box">صندوق أخضر</div>
</div>
</body>
</html>

جرب بنفسك

خصائص CSS

الخصائص الوصف
z-index إعداد ترتيب تدرج العناصر.