اذهب إلى المحتوى
  • 0

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

Badraoui

السؤال

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...