z-index
Misol
Rasm matn orqasida ko‘rinishi uchun unga z-index o‘rnating:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
z-index xususiyati elementning qatlam tartibini (stack order) belgilaydi.
Qatlam tartibi kattaroq element har doim qatlam tartibi kichikroq elementning oldida turadi.
Eslatma: z-index faqat joylashtirilgan elementlarda (position: absolute, position: relative, position: fixed yoki position: sticky) va flex elementlarida (display:flex elementlarining bevosita bolalari bo‘lgan elementlarda) ishlaydi.
Eslatma: Agar z-index ko‘rsatilmagan ikkita joylashtirilgan element bir-birining ustiga tushsa, HTML kodida oxirgi joylashgan element ustda ko‘rsatiladi.
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS2 |
| JavaScript sintaksisi: | object.style.zIndex="-1" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
CSS sintaksisi
z-index: auto|number|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| auto | Qatlam tartibini ota elementnikiga teng qilib o‘rnatadi. Bu standart qiymat | Demo ❯ |
| number | Elementning qatlam tartibini o‘rnatadi. Manfiy sonlarga ruxsat beriladi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Turli qutilar uchun z-index o‘rnating:
.wrapper {
position: relative;
}
.box1 {
position: relative;
z-index: 1;
border: solid;
height: 100px;
margin: 50px;
}
.box2 {
position: absolute;
z-index: 2;
background: pink;
width: 20%;
left: 65%;
top: -25px;
height: 120px;
opacity: 0.9;
}
.box3 {
position: absolute;
z-index: 3;
background: cyan;
width: 70%;
left: 40px;
top: 60px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS joylashtirish
HTML DOM ma’lumotnomasi: zIndex xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!