تخطيط CSS - خاصية الفهرس z
تحدد الخاصية ترتيب z-index
مكدس العنصر.
خاصية الفهرس z
عندما يتم وضع العناصر ، يمكن أن تتداخل مع عناصر أخرى.
تحدد الخاصية ترتيب z-index
مكدس العنصر (أي عنصر يجب وضعه أمام العناصر الأخرى أو خلفها).
يمكن أن يكون للعنصر ترتيب مكدس موجب أو سلبي:
هذا عنوان
نظرًا لأن الصورة تحتوي على مؤشر z -1 ، فسيتم وضعها خلف النص.
مثال
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
ملاحظة: z-index
يعمل فقط على العناصر الموضوعة (الموضع: مطلق ، الموضع: نسبي ، الموضع: ثابت ، أو الموضع: مثبت) والعناصر المرنة
(العناصر التي هي عناصر فرعية مباشرة للعرض: العناصر المرنة).
مثال آخر على مؤشر z
مثال
هنا نرى أن العنصر الذي يحتوي على ترتيب مكدس أكبر يكون دائمًا فوق عنصر بترتيب مكدس أقل:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
بدون فهرس z
إذا تداخل عنصران موضوعيان مع بعضهما البعض بدون تحديد ، فسيتم عرض z-index
العنصر المحدد أخيرًا في كود HTML في الأعلى.
مثال
نفس المثال أعلاه ، ولكن هنا بدون تحديد z-index:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
خاصية CSS
Property | Description |
---|---|
z-index | Sets the stack order of an element |