• 0

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

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

تمكّنك خاصية 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

z1.thumb.png.10644aef8d4d2ceebcc9c562250

2- بدون تحديد الخاصية z-index= -1

z2.thumb.png.9a3f94797a89443a3acd4eb39c5

3- بدون تحديد position:absolute

3.thumb.png.6efb303d96e36bbaf2702691d2b9

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن