z-index في CSS

22 - 08 - 2008

تستخدم z-index في CSS لتحديد البعد الثالث ، أو لنقل أنها تحدد "أفضلية الظهور !".

z-index هي إحدى خواص CSS ، عند التعامل مع DOM تصبح zIndex و تستخدم لتحديد البعد وفق المحور Z فإذا اعتبرنا أن المستوى الأساسي الذي هو مستوى الصفحة فيمكن اعتبار العناصر التي تكون فوق بعضها عدة طبقات و عادة تظهر الطبقة التي تأتي لاحقا فوق السابقة لكن بواسطة z-index يمكن تعيين قيمة لطبقة بحيث تكون أعلى من غيرها رغم ورود غيرها بعدها.

مثال ، اضغط هنا ، إنها 5 عناصر HTML من نوع div ملونة بألون مختلفة ، اضغط على أي مربع لتغيير قيمة z-index له لتصبح 3 و اضغط مرة أخرى ليعود 1 هذا لا ينطبق على المربع الأحمر في المنتصف ولا على المربع الذي في الزاوية اليسرى السفلية.

الحدث onclick المضاف و استخدام DOM هو فقط لتقديم مثال فعال.

CSS

#tl{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: #A4B928;
}
#tr{
    position: absolute;
    left: 100px;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: #C2611F;
}
#c{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: #DF270D;
    z-index:2;
}
#br{
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: #9D4F80;
}
#bl{
    position: absolute;
    left: 0px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: #004040;
}

CSS . تطوير المواقع . برمجة | قراءات (458) . تعليقات (1) . إضافة تعليق