CSS z-index

CSS z-index xossasi

z-index xossasi joylashtirilgan elementlarning taxlanish tartibini belgilaydi.

Taxlanish tartibi qaysi element boshqa elementlarning oldida yoki orqasida joylashishini belgilaydi.

Elementlar joylashtirilganda ular boshqa elementlarning ustiga chiqishi mumkin.

Element musbat yoki manfiy taxlanish tartibiga (z-index) ega bo‘lishi mumkin:

Bu sarlavha

Rasmning z-index qiymati -1 bo‘lgani uchun u matn orqasiga joylashadi.

Misol

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

O'zingiz sinab ko'ring »

Eslatma: z-index faqat joylashtirilgan elementlarda (position: absolute, position: relative, position: fixed yoki position: sticky) va flex elementlarda (display: flex elementlarining bevosita bola elementlarida) ishlaydi.

Yana bir z-index misoli

Taxlanish tartibi kattaroq bo‘lgan joylashtirilgan element har doim taxlanish tartibi kichikroq bo‘lgan elementdan yuqorida turadi.

Misol

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

O'zingiz sinab ko'ring »

Without z-index

Agar bir nechta joylashtirilgan element z-index belgilanmagan holda bir-birining ustiga chiqsa, ular HTML manba kodida qanday tartibda yozilgan bo‘lsa, shu tartibda ko‘rsatiladi.

Misol

Yuqoridagi misolning o‘zi, lekin bu yerda z-index belgilanmagan:

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

O'zingiz sinab ko'ring »

CSS CSS xossasi

Xossa	Description
z-index	Elementning taxlanish tartibini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish