Position — static, relative, absolute, fixed, sticky

~20 daq · CSS · Pozitsiya va Responsive

Muammodan boshlaylik

Flexbox va Grid elementlarni oqim ichida joylashtiradi — har biri o'z joyini oladi va qo'shnilarini suradi. Lekin ba'zi elementlar oqimdan tashqarida bo'lishi kerak:

• Mahsulot rasmining burchagida "−20%" belgisi
• Sahifani scroll qilganda ham ekran tepasida turadigan header
• Ekranning pastki o'ng burchagidagi chat tugmasi
• Ochiladigan menyu (dropdown) — boshqa elementlarni surmasdan, ularning ustida

Buning uchun — position xususiyati.

Oqim (normal flow)

Avval asosiy tushuncha. Standart holatda elementlar normal oqimda: blok elementlar ustma-ust, inline elementlar qator bo'ylab, har biri o'z joyini egallab, qo'shnilarini suradi.

position elementni oqimda qoldiradi yoki undan chiqaradi, va top, right, bottom, left xususiyatlari bilan siljitishga imkon beradi.

static — standart

.box {
  position: static;
}

Oddiy oqim. top/left/z-index ishlamaydi. Yozish shart emas — hamma elementlar standartda static.

relative — o'z joyiga nisbatan

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

Element asl joyidan 10px pastga, 20px o'ngga siljiydi. Lekin uning asl joyi oqimda bo'sh qoladi — qo'shnilar u hali o'sha joyda turgandek joylashadi.

┌────────┐
│   1    │
└────────┘
┌ ─ ─ ─ ─┐  ← 2-elementning asl joyi bo'sh qoladi
     ┌────────┐
│    │   2    │  ← siljigan
     └────────┘
┌────────┐
│   3    │  ← siljimadi, 2-element joyida turgandek
└────────┘

Siljitish uchun kamdan-kam ishlatiladi. Asosiy vazifasi — absolute bolalar uchun mo'ljal bo'lish (pastda).

absolute — oqimdan tashqarida

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

• Element oqimdan chiqadi — joy egallamaydi, qo'shnilar uni "ko'rmaydi"
• top/right/bottom/left — eng yaqin pozitsiyalangan ajdodning (ya'ni position i static emas bo'lgan ota yoki bobosining) chegarasidan
• Bunday ajdod bo'lmasa — butun sahifaga nisbatan

Eng muhim naqsh: relative ota + absolute bola

Darsning boshidagi 1-vazifa:

<article class="card">
  <img src="noutbuk.jpg" alt="Noutbuk">
  <span class="badge">−20%</span>
  <h3>Noutbuk Pro 14</h3>
</article>

.card {
  position: relative;      /* mo'ljal — siljimaydi, faqat "langar" */
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dc2626;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
}

[!WARNING] Eng ko'p uchraydigan xato: otaga position: relative ni unutish. Unda belgi kartochkaga emas, butun sahifaga nisbatan joylashadi — va sahifaning yuqori burchagida paydo bo'ladi. "absolute elementim qayerdadir uchib ketdi" — 90% holatda sabab shu.

Butun otani qoplash

.overlay {
  position: absolute;
  inset: 0;              /* = top: 0; right: 0; bottom: 0; left: 0; */
  background: rgb(0 0 0 / 0.5);
}

inset — to'rt tomonni bitta xususiyatda. inset: 0 — otani to'liq qoplash (modal fonlari, rasm ustidagi qoraytirish).

Kartochkani to'liq bosiladigan qilish

.card { position: relative; }

.card a::after {
  content: "";
  position: absolute;
  inset: 0;             /* havolaning "bosish maydoni" butun kartochkaga cho'ziladi */
}

HTML da faqat sarlavha havola, lekin kartochkaning istalgan joyiga bosish ishlaydi.

Absolute element o'lchami

Oqimdan chiqqan element blok bo'lsa ham butun kenglikni egallamaydi — kontentiga qarab o'lchanadi. Kerak bo'lsa: width yoki left + right birga (left: 0; right: 0; — ota kengligida).

fixed — ekranga yopishgan

.chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

• Oqimdan chiqadi
• Ekranga (viewport) nisbatan — sahifa scroll qilinganda ham joyida qoladi

3-vazifa hal. Modal oynalar, cookie banner lar, "tepaga qaytish" tugmasi — hammasi fixed.

Fixed header:

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
}

body {
  padding-top: 64px;   /* header oqimdan chiqdi — kontent uning ostiga kirib ketmasin */
}

[!INFO] Agar ajdodlardan birida transform, filter yoki perspective bo'lsa, fixed element ekranga emas, o'sha ajdodga nisbatan joylashadi (va u bilan birga scroll bo'ladi). Modal oyna animatsiyali konteyner ichida "noto'g'ri joyda" chiqsa — sabab ko'pincha shu. Yechim: modalni body ning bevosita bolasi qiling.

sticky — scroll bilan yopishadigan

.header {
  position: sticky;
  top: 0;
}

• Oddiy oqimda turadi (joy egallaydi, relative kabi)
• Scroll qilinib, top: 0 chegarasiga yetganda — yopishib qoladi (fixed kabi)
• O'z ota konteyneri chegarasidan chiqmaydi: ota scroll bo'lib ketsa — sticky element u bilan birga ketadi

2-vazifa — fixed dan yaxshiroq: body ga padding-top kerak emas, chunki element oqimdan chiqmaydi.

/* Jadval sarlavhasi scroll paytida ko'rinib tursin */
thead th {
  position: sticky;
  top: 0;
  background: white;
}

/* Bo'lim sarlavhalari — har biri o'z bo'limi davomida yopishadi */
.section-title {
  position: sticky;
  top: 64px;           /* header ostida */
}

DevDocs dagi navbar va darslar sahifasidagi chap menyu — sticky.

Sticky ishlamasa

Eng ko'p uchraydigan sabablar:

1. top (yoki bottom) berilmagan — sticky ga chegara kerak
2. Ajdodlardan birida overflow: hidden, auto yoki scroll — sticky o'sha elementga yopishadi va u scroll qilmasa, hech narsa sezilmaydi (10-dars: kesish kerak bo'lsa overflow: clip ishlating)
3. Ota element sticky elementning o'zi bilan bir xil balandlikda — yopishishga joy yo'q
4. Ota flex/grid konteyner va sticky element align-self: stretch bilan cho'zilgan — align-self: start bering

Qaysi birini qachon

[!TIP] Layout uchun position: absolute ishlatmang (masalan, ustunlarni joylashtirishga). Oqimdan chiqqan elementlar kontent o'zgarganda bir-birining ustiga tushadi. Asosiy joylashuv — Flexbox va Grid; position — faqat oqimdan tashqarida bo'lishi kerak bo'lgan narsalar uchun.

Nima uchun shunday?

Nima uchun absolute element sahifaga emas, eng yaqin pozitsiyalangan ajdodga nisbatan joylashadi — bu chalkash emasmi?

Bu komponentlarni mustaqil qiladi. Kartochka burchagidagi belgi kartochkaga nisbatan joylashishi kerak — kartochka sahifaning qayerida bo'lishidan qat'i nazar: tepada, pastda, Grid ning 7-katagida yoki modal oyna ichida. Agar absolute doim sahifaga nisbatan bo'lsa, har bir kartochka uchun uning sahifadagi aniq o'rnini hisoblash kerak edi — bu imkonsiz. position: relative bilan siz "mana shu yerda langar" deysiz, va ichidagi absolute elementlar shu langarga bog'lanadi. Komponentni ko'chirsangiz — langar ham u bilan ko'chadi. Shuning uchun relative ko'pincha hech narsani siljitmasdan, faqat "langar" bo'lish uchun yoziladi.

Xulosa

Eslab qoling:

• static — standart, top/left ishlamaydi
• relative — o'z joyiga nisbatan siljiydi, joyi saqlanadi; asosan absolute bolalar uchun "langar"
• absolute — oqimdan chiqadi; eng yaqin pozitsiyalangan ajdodga nisbatan; otaga relative ni unutmang
• inset: 0 — otani to'liq qoplash
• fixed — ekranga nisbatan; ajdodda transform bo'lsa — buziladi
• sticky — oqimda, chegaraga yetganda yopishadi; top kerak; ajdodda overflow bo'lmasin
• Asosiy layout — Flexbox/Grid; position — oqimdan tashqaridagilar uchun

Keyingi dars

24-dars: Z-index va Stacking Context