CSS Layout - The z-index Property

-

في هذا الدرس نتعرف على كيفية استخدام الخاصية z-index

ما هي z-index : 

يمكن من خلال هذه الخاصية التحكم بالترتيب الرأسي vertical stacking order ل elements في الصفحة

الصورة التالية توضح ذلك : 


بمعني ممكن في الصفحة يكون في تداخل ل elements فوق elements ومن خلال هذه الخاصية بتم التحكم بطريقة العرض (وتحديد أي العناصر يجب وضعها امام العناصر الأخرى).
وهذا الترتيب ممكن يكون موجب او سالب. 
تمام نجرب مثال ونشوف النتيجة، في صفحة HTML نضيف الكود التالي :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>
<img src="bellAlert.gif">
<p>z-index=-1 تم عرض الصورة خلف الكتابة لانه تم اعطاءها قيمة تريب تساوي  </p>
</body>
</html>
شغل الصفحة وشوف النتيجة:
ملاحظة: z-index يعمل مع قيم position التالية: (absolute، relative، fixed، sticky) وأيضا مع flex items (الي هي ال elements الي بتكون direct children ل display)

طريقة الكتابة :
z-index: -1;
 القيم Parameters or Arguments التي يمكن استخدامها :


القيمة 
الوصف
value

قيمة موجبة او سالبة 

z-index: -1;

z-index: 1000;


مثال 2: 

طبق الكود التالي في صفحة HTML

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    background-color:red;
       width:300px;
       height:100px;
       position:relative;
       top:10px;
       left:80px;
       z-index:2
}
.div2 {
    background-color:yellow;
       width:300px;
       height:100px;
       position:relative;
       top:-60px;
       left:35px;
       z-index:1;
}
.div3 {
    background-color:green;
       width:300px;
       height:100px;
       position:relative;
       top:-220px;
       left:120px;
       z-index:3;
}
</style>
</head>
<body>
<img src="bellAlert.gif">
<p>z-index=-1 تم عرض الصورة خلف الكتابة لانه تم اعطاءها قيمة تريب تساوي  </p>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</body>
</html>

شغل الصفحة وراسلنا في حال وجود أسئلة ومشاكل