# Pozitsiya (position, z-index)

> CSS position xossasi: static, relative, absolute, fixed va sticky farqi. Elementni aniq joyga qo'yish va z-index bilan qatlam tartibi — jonli misollarda.

Manba: https://learncode.uz/html-css/pozitsiya/
Sana: 2026-05-23

Shu paytgacha ko'rgan usullarimiz — [Flexbox](https://learncode.uz/html-css/flexbox) va
[Grid](https://learncode.uz/html-css/grid) — elementlarni **oqim bo'ylab** joylashtiradi: biri
tugaydi, keyingisi boshlanadi.

Ba'zan elementni normal joyidan siljitish, boshqa quti ustiga qo'yish yoki
viewportga mahkamlash kerak bo'ladi. `position` bu xatti-harakatni boshqaradi;
uning barcha qiymati elementni oqimdan chiqarmaydi.

Bu dars yakunida besh position qiymatini oqimga ta'siri bilan farqlaysiz,
absolute element uchun containing block yaratasiz, fixed/sticky chegaralarini
tushunasiz va stacking context ichida `z-index` ni boshqarasiz.

## Beshta qiymat

| Qiymat | Nima qiladi |
|--------|-------------|
| `static` | Standart — odatiy oqimda |
| `relative` | O'z joyidan siljiydi, joyi saqlanadi |
| `absolute` | Oqimdan chiqadi, ota elementga nisbatan |
| `fixed` | Odatda viewportga qadaladi, sahifa bilan aylanmaydi |
| `sticky` | Yopishadi — chegaraga yetganda qotadi |

Joyni belgilash uchun `top`, `right`, `bottom`, `left` yoki ularning mantiqiy
`inset-*` muqobillari ishlatiladi. Oddiy `static` elementda inset qiymatlari
joylashuvni o'zgartirmaydi; sticky uchun esa kamida bitta chegara zarur.

## `relative` — o'z joyidan siljish

```html
<div class="qator">
    <div class="e">1</div>
    <div class="e siljigan">2</div>
    <div class="e">3</div>
  </div>
```

```css
.qator {
    background: #f1f5f9;
    padding: 20px;
  }
  .e {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 18px;
    border-radius: 4px;
    font-family: sans-serif;
  }
  .siljigan {
    position: relative;
    top: 20px;
    left: 20px;
    background: #b91c1c;
  }
```

Qizil element siljidi, lekin uning **asl joyi bo'sh qoldi** — qo'shnilari
o'rnidan qimirlamadi. Shu sababli `relative` yolg'iz kamdan-kam ishlatiladi;
uning asosiy vazifasi boshqacha.

> **Yodda tuting**
>
> `position: relative` ning eng ko'p uchraydigan vazifasi — o'zini siljitish
> emas, balki ichidagi `absolute` elementlar uchun **tayanch nuqta** bo'lish.
> Buni keyingi misolda ko'ramiz.

## `absolute` — oqimdan chiqish

`absolute` element oqimni tark etadi: u boshqa elementlarga ta'sir qilmaydi va
ular ham unga e'tibor bermaydi.

```html
<div class="ota">
    Ota element (position: relative)
    <div class="belgi">YANGI</div>
  </div>
```

```css
.ota {
    position: relative;
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
    padding: 30px;
    height: 100px;
    font-family: sans-serif;
  }
  .belgi {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #b91c1c;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
  }
```

Bu — mahsulot kartochkasidagi "YANGI" yoki "CHEGIRMA" yorlig'ining aynan
o'zi. `top: 10px; right: 10px` — ota elementning yuqori o'ng burchagidan
10 piksel.

> **Diqqat**
>
> `absolute` element eng yaqin **containing block** yaratgan ajdodga nisbatan
> joylashadi. Buni ko'pincha `position: relative` berilgan ota yaratadi; ayrim
> transform va boshqa xususiyatlar ham containing block hosil qilishi mumkin.
> Mos ajdod bo'lmasa, joylashuv boshlang'ich containing blockka nisbatan ketadi.
>
> Shuning uchun qoida: ichida `absolute` bo'lsa, otaga `position: relative`
> bering.

## `fixed` — ekranga qadalgan

`fixed` element oynaga qadaladi va sahifa aylantirilganda ham joyida qoladi:

```html
<button class="tugma" type="button" aria-label="Yuqoriga qaytish">↑</button>
  <h2>Iframe viewportini aylantiring</h2>
  <p>Matn qatori 1</p>
  <p>Matn qatori 2</p>
  <p>Matn qatori 3</p>
  <p>Matn qatori 4</p>
  <p>Matn qatori 5</p>
  <p>Pastga aylantirsangiz ham tugma viewport burchagida qoladi.</p>
  <p>Matn qatori 7</p>
  <p>Matn qatori 8</p>
```

```css
body {
    min-height: 460px;
    background: #f1f5f9;
    font-family: sans-serif;
  }
  .tugma {
    position: fixed;
    bottom: 12px;
    right: 20px;
    background: #1e293b;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    border: 0;
  }
  p { margin: 10px 0; }
```

Amalda bu — "yuqoriga qaytish" tugmasi, doimiy navbar yoki cookie haqidagi
xabar uchun ishlatiladi.

## `sticky` — yopishqoq

`sticky` ikkovining aralashmasi: element odatdagidek oqimda turadi, lekin
belgilangan chegaraga yetganda **qotib qoladi**:

```html
<div class="oyna">
    <p>Yuqoridagi matn</p>
    <p>Pastga aylantiring...</p>
    <h3 class="sarlavha">Yopishqoq sarlavha</h3>
    <p>Matn 1</p>
    <p>Matn 2</p>
    <p>Matn 3</p>
    <p>Matn 4</p>
    <p>Matn 5</p>
    <p>Matn 6</p>
  </div>
```

```css
.oyna {
    height: 200px;
    overflow-y: scroll;
    background: #f8fafc;
    padding: 12px;
    font-family: sans-serif;
  }
  .sarlavha {
    position: sticky;
    top: 0;
    background: #2563eb;
    color: white;
    padding: 10px;
    margin: 0;
    border-radius: 4px;
  }
  p { margin: 10px 0; }
```

Sarlavha yuqoriga yetganda to'xtab qoladi. Bu usul jadval sarlavhalari va
bo'lim nomlari uchun keng qo'llanadi.

> **Atama**
>
> **Sticky** — element `top` (yoki boshqa) chegaraga yetgunicha oddiy oqimda
> harakatlanadi, chegaraga yetgach scroll konteyneri ichida yopishadi. U o'z
> containing block chegarasidan tashqariga chiqmaydi; ota overflow qiymati va
> scroll konteyneri sticky natijasiga ta'sir qilishi mumkin.

## `z-index` — qatlam tartibi

Elementlar ustma-ust tushganda qaysi biri yuqorida turishini `z-index`
belgilaydi. Bir xil stacking context ichida kattaroq stack darajasi oldinda
chiziladi:

```html
<div class="maydon">
    <div class="quti kok">z-index: 1</div>
    <div class="quti qizil">z-index: 3</div>
    <div class="quti yashil">z-index: 2</div>
  </div>
```

```css
.maydon {
    position: relative;
    height: 150px;
    background: #f1f5f9;
  }
  .quti {
    position: absolute;
    width: 110px;
    height: 70px;
    padding: 10px;
    color: white;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 13px;
  }
  .kok    { background: #2563eb; top: 20px; left: 20px;  z-index: 1; }
  .qizil  { background: #b91c1c; top: 45px; left: 65px;  z-index: 3; }
  .yashil { background: #047857; top: 70px; left: 110px; z-index: 2; }
```

> **Diqqat**
>
> `z-index` positioned elementlarda, shuningdek flex va grid itemlarda ishlashi
> mumkin. Taqqoslash stacking contextlar ichida sodir bo'ladi: ichki elementga
> `99999` berish uni boshqa, yuqoriroq contextdan avtomatik olib chiqmaydi.
> Transform, opacity va ayrim boshqa xususiyatlar yangi stacking context
> yaratadi. Tasodifiy ulkan son o'rniga loyihada tartibli qatlam shkalasi
> (`dropdown`, `sticky`, `modal`) ishlating.

## Amaliy mashq

Kartaga `position: relative`, uning ichidagi badgega `absolute` bering.
Keyin scroll konteynerida sticky sarlavha yarating. DevTools orqali bir
ajdodga `transform` qo'shib, containing block yoki stacking context natijasi
qanday o'zgarishini kuzating.

## Qisqacha xulosa

- `position` elementning joylashuv usulini belgilaydi; faqat `absolute` va
  `fixed` odatda normal oqimdan chiqadi.
- **`relative`** — o'z joyidan siljiydi, joyi saqlanadi; ko'pincha tayanch sifatida.
- **`absolute`** — oqimdan chiqadi, eng yaqin containing blockka nisbatan turadi.
- **`fixed`** — ekranga qadaladi, aylantirishda qimirlamaydi.
- **`sticky`** — chegaraga yetguncha oqimda, keyin qotadi.
- Inset qiymatlari positioned elementni joylaydi; sticky uchun chegara zarur.
- `z-index` stacking context ichidagi qatlam tartibini belgilaydi.

Keyingi darsda [responsiv dizayn](https://learncode.uz/html-css/responsiv-dizayn) — sahifani
telefon, planshet va kompyuterga moslash hamda birinchi to'liq loyihamiz.