ترتيب العناصر في طبقات باستخدام الخاصية z-index
عادةً ما تعتبر صفحات HTML ثنائية الأبعاد ، لأن النصوص والصور والعناصر الأخرى مرتبة على الصفحة دون تداخل. ومع ذلك بالإضافة إلى مواضعها الأفقية والرأسية ، يمكن ترتيب الصناديق على طول المحور z وكذلك التحكم في ترتيبها أي واحدة فوق الأخرى باستخدام خاصية CSS z-index. تحدد هذه الخاصية مستوى الترتيب للصندوق الذي تكون قيمة الخاصية position له واحة من التالية : absolute أو fixed أو relative.
يتم التعبير عن موضع المحور z لكل طبقة على أنه عدد صحيح يمثل ترتيب العناصر للعرض. يعلو العنصر ذو القيمة الأكبر للخاصية z-index العنصر ذو القيمة الأصغر.
يمكن أن تساعدك الخاصية z-index على إنشاء تخطيطات صفحات ويب أكثر تعقيدًا. يوضح المثال التالي كيفية إنشاء طبقات في في لغة CSS.
مثال
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://educationfactorys.com/"/>
<title>ترتيب العناصر في طبقات</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
color: lightgray;
font-weight: bold;
}
img {
width:100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>الخاصية z-index </h1>
<img src="images/CSS3-banner-img.png">
<p>نظرًا لأن قيمة الخاصية z-index للصورة هي -1 ، فسيتم وضعها خلف العنوان وخلف عنصر الفقرة.</p>
</body>
</html>
المخرجات
مثال آخر لمزيد من التوضيح:
مثال
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<style>
body {
position:absolute;
text-align:center;
font-size:20px;
font-weight: bold;
}
h1 , p {
direction: rtl;
text-align:right;
}
div {
position:absolute;
}
#container div {
background-color: #ffcccc;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: lightyellow;
z-index: 4;
}
</style>
</head>
<body>
<h1>تأثير الخاصية z-index على مجموعة من العناصر</h1>
<p>قم بتغير قيم الخاصية z-index الموجودة داخل المحدد div#myBox من 1-5 </p>
<div id="container">
<div id="myBox">انظر هنا</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
</body>
</html>
المخرجات
كورس css
عدد الموضوعات 28 الخاصة ب كورس ' css3 ' العدد الكلي .