هل من توضيح حول خاصية Z-index في Css؟

Badraoui · 2 نوفمبر 2015

بين الحين والآخر أقرأ ملفات css لمشاريع تعجبني بغرض التعلّم، وكثيرًا ما تمرّ معي الخاصيّة Z-index ولكني إلى الآن لم أعرف فيما تستعمل؟ وما وظيفتها بالضبط؟ فهل من توضيح؟ أو رابط لدرس خاص بها؟

Lujain Maaz · 3 نوفمبر 2015

تمكّنك خاصية z-index عند تطبيقها على عنصر من وضعه في المقدمة أي يأخذ grater stack order (المحور Z) حتى لو كان هناك عناصر متوضعة فوقه .

لنفرض أنك تريد وضع نص أمام صورة (أي تظهر الصورة خلف النص) مثال:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

لاحظ أننا وضعنا خاصية z-index=-1 للصورة أي أرجعناها للخلف حتى يظهر النص أمامها ولكن هذا لا يكفي، يجب تحديد الخاصية position للصورة وجعلها absolute أي أنها تأخذ المكان المحدد لها حتى لو كان هناك عناصر حولها. ((بشكل افتراضي جميع العناصر تأخذ الخاصية position: relative أي أنها تحدد إحداثياتها حسب العنصر الذي قبلها)) ولكن الخاصية absolute تجعل العنصر يتجاهل العناصر الموجودة ويأخذ مكانه بحسب الـdiv الموجود فيه.

1- مع الخاصية Z-index