5.1-dars: Pozitsionerlash

position: relative — o'z joyiga nisbatan siljish

Sen allaqachon flexbox va margin'lar yordamida elementlarni joylashtirishni bilasan. Lekin agar elementni qo'shnilariga ta'sir qilmasdan biroz chetga surish kerak bo'lsa-chi? Buning uchun position: relative mavjud.

Elementga position: relative belgilaganingda, u hujjat oqimida qoladi (ya'ni odatdagi joyini egallaydi), lekin sen top, bottom, left, right xususiyatlari yordamida uni shu joyga nisbatan surishing mumkin.

.box {
  position: relative;
  top: 20px;    /* 20px pastga siljish */
  left: 30px;   /* 30px o'ngga siljish */
  /* yoki */
  bottom: 10px; /* yuqoriga siljish (pastdan) */
  right: 15px;  /* chapga siljish (o'ng chetdan) */
}

Muhim: elementning boshlang'ich joyi band bo'lib qoladi. Qo'shni elementlar siljishni «sezmaydi» — ular xuddi element o'z joyida turgandek turishadi. U shunchaki siljish bilan chiziladi.

Ko'ryapsanmi, o'rtadagi blok pastga va o'ngga siljidi, qolganlari esa hech narsa bo'lmagandek turibdi. Ular hatto o'rtadagi blok siljiganini bilishmaydi ham — u hamon oqimda o'zining dastlabki joyini egallab turibdi.

Lekin position: relativening asosiy super kuchi bunda emas. U shundaki, u mutlaq pozitsionerlangan bolalar uchun boshlang'ich nuqtaga aylanadi. Bu haqda — keyingi bo'limda.

position: absolute — ota-elementga bog'lash

Mutlaq pozitsionerlash — bu element hujjat oqimidan chiqib, eng yaqin position: relativega (yoki agar bunday ota-element bo'lmasa, brauzer oynasiga) «yopishib qolishi»dir.

.parent {
  position: relative; /* boshlang'ich nuqta */
}

.child {
  position: absolute;
  top: 20px;    /* ota-elementning yuqorisidan 20px */
  right: 10px;  /* ota-elementning o'ng chetidan 10px */
}

Element position: absoluteni olganda, u:

• Oqimdan yo'qoladi — qo'shni elementlar uni ko'rmaydi va uning joyini egallaydi
• Eng yaqin position: relative (yoki absolute, yoki fixed)ga ega ota-elementga bog'lanadi
• Agar bunday ota-element bo'lmasa — brauzer oynasiga bog'lanadi
• Uning kengligi odatiy holatda mazmunga moslashib siqiladi
• Sen top, bottom, left, rightni belgilashing mumkin

E'tibor ber: mutlaq blok konteynerning o'ng yuqori burchagida joylashgan. Ikkinchi oddiy blok xuddi mutlaq blok yo'qdek, birinchisining tagiga to'g'ridan-to'g'ri joylashdi — chunki u oqimda yo'q.

Absolute'ning klassik ishlatilish misoli — mahsulot kartochkasidagi «chegirma» belgisidir:

<div class="product-card">
  <div class="badge">-20%</div>
  <img src="product.jpg" alt="Mahsulot">
  <h3>Nomi</h3>
  <p>Narxi: 1000 ₽</p>
</div>

<style>
  .product-card {
    position: relative;
    /* ... kartochka stillari ... */
  }
  .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e94560;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: bold;
  }
</style>

Belgi mazmundan qat'i nazar, kartochkaning chap yuqori burchagiga yopishadi. Rasm bo'ladimi, matn bo'ladimi — belgi har doim o'z joyida turadi.

Yana bir keng tarqalgan pattern — mutlaq elementni markazlashtirish. Agar top: 50%; left: 50% belgilab, so'ng transform orqali o'zining kengligi/balandligining yarmiga orqaga siljitilsa:

.centered-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Bu flexbox'dan ancha oldin ishlagan markazlashtirishning eski usuli. Hozir undan kamroq foydalanishadi, lekin ba'zan usiz iloj bo'lmaydi (masalan, element position: absolute bilan hamma narsaning ustida bo'lishi kerak bo'lganda).

Yuqoridagi blok kulrang yarim shaffof overlay ichida markazlashtirilgan. Ota-elementda position: relative, blokda esa top: 50%; left: 50%; transform: translate(-50%, -50%) bilan position: absolute bor.

position: fixed — brauzer oynasiga bog'lash

position: fixed absolute'ga o'xshaydi, lekin bitta muhim farq bilan: element ota-elementga emas, brauzer oynasiga bog'lanadi. Va u sahifa aylantirilganda siljimaydi.

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: #fff;
  z-index: 100;
}

Bu heder hatto sahifani 10000 piksel pastga aylantirilsa ham, har doim yuqorida bo'ladi.

Fixed-elementlar quyidagilar uchun ishlatiladi:

• Sayt hederi (header) — aylantirishda har doim ko'rinadi
• «Yuqoriga» tugmasi — ekran burchagida suzib turadi
• Cookie-bildirishnomalari — ekranning pastiga yopishadi
• Yon panellar — har doim o'z joyida

body {
  padding-top: 60px; /* kontent fixed-heder ostiga yashirinmasligi uchun */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #1a1a2e;
  color: #fff;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

Fixed-element oqimda joy egallamaydi, shuning uchun kontent uning ostiga «kirib qoladi». Buni tuzatish uchun keyingi elementga padding-top yoki margin-top qo'shiladi.

z-index — kim yuqorida

Elementlar bir-birining ustiga chiqa boshlaganda (absolute, fixed, siljigan relative), savol tug'iladi: ulardan qaysi biri tepada? Bunga z-index javob beradi.

.element {
  position: relative;
  z-index: 10; /* qancha katta bo'lsa, shuncha yuqorida */
}

z-index faqat position: relative, absolute, fixed yoki stickyga ega elementlarda ishlaydi. Statik elementlarda u e'tiborga olinmaydi.

Elementlar uyum bo'lib yotganini tasavvur qil. z-index qancha katta bo'lsa, element uyumda shuncha yuqorida bo'ladi. Odatiy holatda z-index autoga (yoki 0ga) teng. Bir xil z-index'ga ega elementlar HTML'da paydo bo'lish tartibida joylashadi (kechroq kelgani — yuqorida).

Qizil blok (z-index: 1) — eng pastda. Yashil (z-index: 2) — uning ustida. Binafsha (z-index: 3) — eng tepada. Agar ularning z-index'ini almashtirsang, ustma-ustlik tartibi ham o'zgaradi.

Muhim nuans: ustma-ustlik konteksti (stacking context). Agar ota-elementda z-index bo'lsa, uning bolalari yuqoriroq z-index'ga ega boshqa ota-element orqali «sakrab o'ta» olmaydi. Kontekstlar ierarxiyasi:

<!-- Ustma-ustlik konteksti misoli -->
<div style="position:relative; z-index:10;">
  <div style="position:absolute; z-index:9999;">
    Bu element boshqa kontekstdagi ota-elementdan YUQORI bo'la olmaydi
  </div>
</div>

<div style="position:relative; z-index:5;">
  <div style="position:absolute; z-index:1;">
    Bu element pastroq, garchi uning bolasida z-index kattaroq bo'lsa ham
  </div>
</div>

Amalda bu quyidagini bildiradi: agar elementga z-index: 9999 belgilagan bo'lsang-u, u baribir biror narsaning ostida bo'lsa — u kichikroq z-index'ga ega konteyner ichida emasmi, tekshirib ko'r.

z-index'ning to'g'ri tashkil etilishi shunday ko'rinishi mumkin:

/* z-index darajalari */
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-overlay: 400;
--z-modal: 500;
--z-tooltip: 600;
--z-toast: 700;

Bu tizim darajalarini belgilaydigan CSS-o'zgaruvchilar (maxsus xususiyatlar). Shunday qilib, sen har doim qanday qiymatlar ishlatilayotganini bilasan va z-index: 9999 nega ishlamayotganini taxmin qilib o'tirmaysan.

Amaliyot: markazdagi modal oyna, qat'iy heder

Keling, hammasini birlashtirib, qat'iy heder va markazdagi modal oynaga ega sahifa yasaymiz. Bu internetda pozitsionerlashning eng ko'p uchraydigan ikkita patternidir.

Mana to'liq kod. Nusxala, HTML sifatida saqla va brauzerda och:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal oyna + heder</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding-top: 64px;
    background: #f5f5f5;
    color: #333;
  }

  /* Qat'iy heder */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 24px;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .header .logo {
    font-size: 1.3em;
    font-weight: bold;
    margin-right: 32px;
  }
  .header nav a {
    color: #ccc;
    text-decoration: none;
    margin-right: 20px;
    font-size: 0.95em;
  }
  .header nav a:hover {
    color: #fff;
  }

  /* Kontent */
  .content {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;
  }
  .content h1 {
    font-size: 2em;
    margin-bottom: 20px;
  }
  .content p {
    line-height: 1.8;
    margin-bottom: 16px;
    color: #555;
  }
  .open-modal-btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: transform 0.2s;
  }
  .open-modal-btn:hover {
    transform: scale(1.03);
  }

  /* Modalka overlay'i */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
  }
  .modal-overlay.active {
    display: flex;
  }

  /* Modal oyna */
  .modal {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    animation: modal-in 0.25s ease-out;
  }
  @keyframes modal-in {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  .modal h2 {
    margin: 0 0 12px;
    font-size: 1.5em;
    color: #333;
  }
  .modal p {
    color: #666;
    line-height: 1.6;
    margin: 0 0 24px;
  }
  .modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.4em;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
  }
  .modal-close:hover {
    color: #e94560;
  }
  .modal-actions {
    display: flex;
    gap: 12px;
  }
  .modal-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 0.95em;
    cursor: pointer;
  }
  .modal-actions .btn-primary {
    background: linear-gradient(135deg, #e94560, #c23152);
    color: #fff;
  }
  .modal-actions .btn-secondary {
    background: #f0f0f0;
    color: #555;
  }
</style>
</head>
<body>

  <!-- Fixed Header -->
  <header class="header">
    <div class="logo">⭐ MySite</div>
    <nav>
      <a href="#">Bosh sahifa</a>
      <a href="#">Biz haqimizda</a>
      <a href="#">Xizmatlar</a>
      <a href="#">Kontaktlar</a>
    </nav>
  </header>

  <!-- Content -->
  <main class="content">
    <h1>Xush kelibsiz!</h1>
    <p>
      Bu demo-loyiha qat'iy heder va modal oyna qanday ishlashini ko'rsatadi. Heder position: fixed yordamida sahifaning yuqorisiga yopishtirilgan. U aylantirishda siljimaydi.
    </p>
    <p>
      Modal oyna tugmani bosish orqali ochiladi. U overlay uchun (butun ekranni egallashi uchun) position: fixeddan va flexbox orqali markazlashtirishdan foydalanadi.
    </p>
    <p>
      E'tibor ber: kontent heder ostiga yashirinmasligi uchun body'da padding-top: 64px bor. Agar bu padding olib tashlansa, birinchi abzats heder ostida qoladi.
    </p>
    <button class="open-modal-btn" onclick="document.querySelector('.modal-overlay').classList.add('active')">
      🖱️ Modalkani ochish
    </button>
    <p style="margin-top:24px;">
      Sahifani pastga aylantirib ko'r. Heder o'z joyida qoladi. Mana bu — position: fixedning sehri.
    </p>
    <p style="height:800px; color:#ccc; text-align:center; display:flex; align-items:center; justify-content:center;">
      ↓ Pastga aylantir — heder hamon o'z joyida ↓
    </p>
  </main>

  <!-- Modal Overlay -->
  <div class="modal-overlay" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="modal">
      <button class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('active')">✕</button>
      <h2>💬 Salom!</h2>
      <p>
        Bu modal oyna. U overlaydagi flexbox yordamida (display: flex; align-items: center; justify-content: center) ekran markaziga joylashtirilgan. Modalkada position: relative bor (flex-bolalar uchun odatiy holat).
      </p>
      <div class="modal-actions">
        <button class="btn-primary" onclick="alert('Amal bajarildi!')">Tasdiqlash</button>
        <button class="btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('active')">Bekor qilish</button>
      </div>
    </div>
  </div>

</body>
</html>

Pozitsionerlashdan nimalarni ishlatganimizni ko'rib chiqamiz:

• Heder: position: fixed; top: 0; left: 0; width: 100%; z-index: 1000 — har doim yuqorida, aylantirilmaydi
• Body: padding-top: 64px — kontent heder ostida ko'rinishi uchun
• Overlay: position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000 — butun sahifani, jumladan heder'ni ham qoplaydi
• Modalka: position'ga ega emas, lekin overlaydagi align-items: center; justify-content: centerli display: flex orqali markazlashadi
• Yopish tugmasi: position: absolute; top: 14px; right: 18px — modalkaning o'ng yuqori burchagida

z-index'ga e'tibor ber: heder 1000, overlay 2000. Agar overlay kichikroq bo'lganda (masalan, 500), heder overlay ustida bo'lardi. Nimadir kerak bo'lmagan narsani yopib qo'yayotganda har doim z-index'ni tekshir.

Mana yana bir misol — suzuvchi «Yuqoriga» (back to top) tugmasi. U uzun sahifalarda juda qulay:

<button class="back-to-top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
  ↑ Yuqoriga
</button>

<style>
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #e94560;
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(233,69,96,0.4);
    z-index: 999;
    transition: transform 0.2s, opacity 0.2s;
  }
  .back-to-top:hover {
    transform: scale(1.1);
  }
</style>

Bu tugma har doim ekranning o'ng pastki burchagida. position: fixed uni aylantirishda o'z joyida ushlab turadi. z-index: 999 uning kontent ustida, lekin modalka (uning z-index'i 2000) ostida bo'lishini kafolatlaydi. Ierarxiyaga rioya qilingan.

Keling, xulosa qilaylik. Mana pozitsionerlash bo'yicha shpargalka:

/* POZITSIONERLASH — SHPARGALKA */

/* Nisbiy — o'z joyiga nisbatan siljish */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Mutlaq — position'ga ega ota-elementga bog'lanish */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Qat'iy — oynaga bog'lanish */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Absolute'ni markazlashtirish */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Kim yuqorida */
.z-index {
  z-index: 100;
}

Yodda tutish kerak bo'lgan asosiylari:

• position: relative — elementni oqimdan chiqarmasdan suradi va absolute uchun boshlang'ich nuqta bo'lib xizmat qiladi
• position: absolute — oqimdan chiqaradi, eng yaqin relative ota-elementga bog'lanadi
• position: fixed — oynaga bog'lanadi, aylantirishda siljimaydi
• z-index — kim yuqorida (faqat position bilan ishlaydi)
• Qat'iy heder bo'lganda body uchun padding-top'ni unutma
• z-index'ni tizimli tashkil qil: heder 100, overlay 200, modalka 300

Pozitsionerlash — kuchli vosita. U bilan sen murakkab interfeyslar yaratishing mumkin: ochiladigan menyular, tooltiplar, modalkalar, qat'iy heder'lar. Keyingi darsda biz animatsiyalarni ko'rib chiqamiz — bu interfeyslarni jonli va silliq qilamiz.