CSS position: fixed va sticky — yopishgan elementlar va ularning tuzoqlari

Qisqacha: position: fixed element ekranga (viewport'ga) yopishadi: sahifa surilsa ham joyidan qimirlamaydi. position: sticky esa oqimda turadi va skroll uni top chegarasiga yetkazganda qotadi — faqat otasi tugaguncha. Tuzoqlari: ajdoddagi transform fixed ni, ajdoddagi overflow esa sticky ni buzadi.

Bu darsda

• fixed va sticky farqini ayta olasiz va har biriga mos vazifani tanlaysiz.
• Yopishqoq sarlavha va jadvalning yopishqoq sarlavha qatorini yozasiz.
• sticky ishlamay qolganda uch sababni tekshirasiz: top, ajdoddagi overflow, ota balandligi.
• transform nega fixed ni buzishini tushuntirasiz.
• scroll-padding-top va scroll-margin-top bilan fokus va langarlarni sarlavha ostidan chiqarasiz.

Oldin bilishingiz kerak: position: relative, absolute va containing block, Overflow, Sahifa ichidagi havolalar, Jadval qismlari, Klaviatura va fokus.

1. Nega bu kerak?

«Bahor» saytiga telefondan kirgan mehmon menyuni uzoq suradi. Taom tanladi — endi "Stolni band qilish" tugmasini qidirib, sahifa boshiga qaytadi. Jasur aka so'raydi: "Tugma doim ekranning burchagida tursa bo'lmaydimi?"

Menyu jadvali ham uzun. O'n beshinchi qatorga yetganda mehmon qaysi ustun narx, qaysi ustun porsiya ekanini unutadi. Jadval qismlari darsida "uzun jadvalni skroll qilganda thead ni tepada yopishtirib qo'yish mumkin — CSS qismida" degan edik.

Uchinchi va'da Klaviatura va fokus darsidan: yopishqoq sarlavha Tab bilan kelgan elementni yopib qo'yadi. "Tuzatish — CSS'da maxsus chekinish" degan edik. Sahifa ichidagi havolalar darsida esa scroll-margin-top tilga olingan edi.

Uchala vazifani position ning qolgan ikki qiymati hal qiladi: fixed va sticky.

2. position: fixed

2.1 Ekranga yopishgan element

position: fixed — elementni viewport'ga (brauzer oynasining ko'rinadigan qismiga) nisbatan joylaydi. U absolute kabi oqimdan chiqadi, lekin containing block'i — oynaning o'zi. Sahifa surilsa, oyna joyida qoladi — element ham.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  body {
    padding-bottom: 4rem;
  }
  .bron-havola {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
  }
</style>
<h1>Menyu</h1>
<ol>
  <li>Osh — 35 000 so'm</li><li>Lag'mon — 28 000 so'm</li>
  <li>Manti — 30 000 so'm</li><li>Sho'rva — 25 000 so'm</li>
  <li>Kabob — 32 000 so'm</li><li>Somsa — 8 000 so'm</li>
  <li>Chuchvara — 26 000 so'm</li><li>Norin — 30 000 so'm</li>
  <li>Dimlama — 33 000 so'm</li><li>Mastava — 24 000 so'm</li>
  <li>Qazi — 40 000 so'm</li><li>Salat — 12 000 so'm</li>
  <li>Non — 4 000 so'm</li><li>Ko'k choy — 5 000 so'm</li>
  <li>Qora choy — 5 000 so'm</li><li>Kompot — 8 000 so'm</li>
</ol>
<a class="bron-havola" href="bron/">Stolni band qilish</a>

Nimaga qarang: ro'yxatni natija ichida suring — yashil "Stolni band qilish" tugmasi o'ng pastki burchakda qimirlamay turadi. bron-havola — «Bahor»ning tugma ko'rinishidagi havolasi.

Muhim eslatma: natija oynasida fixed shu oynaga nisbatan. Oyna — alohida kichik sahifa (iframe), uning bo'yi bu blokda 400 piksel. Shuning uchun tugma sizning telefoningiz ekranining emas, natija oynasining burchagida. O'z faylingizda u haqiqiy brauzer oynasiga yopishadi.

2.2 Fixed kontentni yopadi

Fixed element joy egallamaydi. Sahifaning oxirigacha suring: body ga padding-bottom: 4rem yozilmaganda oxirgi "Kompot" qatori tugma ostida qolardi. Qoida: fixed element qancha joyni to'ssa, o'sha joyni sahifaning o'zida bo'sh qoldiring.

Yana ikki ehtiyot:

• Kichik ekran. Telefonda tepada fixed sarlavha, pastda fixed tugma — o'qish uchun joy qolmaydi. Ayniqsa telefon yotqizilganda: oynaning bo'yi 400 pikseldan ham kam bo'lib qoladi.
• Zoom. Foydalanuvchi sahifani 200% kattalashtirsa, fixed element ham kattalashadi va ekranning katta qismini egallaydi. Kattalashtirilgan sahifa ham o'qilishi kerak — bu WCAG talabi (Accessibility nima). Fixed elementlarni kichik va kam qiling.

2.3 Tuzoq: ajdoddagi transform

O'tgan darsda aytgan edik: transform va filter ajdodni containing block'ga aylantiradi. fixed uchun bu jiddiy muammo. Ajdodda transform bo'lsa, fixed element oynaga emas, o'sha ajdodga yopishadi va u bilan birga suriladi.

transform: translate(0) — elementni 0 ga siljitish, ya'ni ko'rinishda hech narsa o'zgarmaydi. Uni 2D transformlar darsida o'rganamiz. Bu yerda u faqat tuzoqni ko'rsatish uchun:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  main {
    transform: translate(0);
  }
  .bron-havola {
    position: fixed;
    bottom: 1rem;
    padding: 0.75rem 1rem;
    color: var(--rang-fon);
  }
  body > .bron-havola {
    right: 1rem;
    background-color: var(--rang-asosiy);
  }
  main .bron-havola {
    left: 1rem;
    background-color: var(--rang-urgu);
  }
  li {
    padding: 0.5rem 0;
  }
</style>
<a class="bron-havola" href="bron/">✅ Bron</a>
<main>
  <h1>Menyu</h1>
  <ol>
    <li>Osh</li><li>Lag'mon</li><li>Manti</li><li>Sho'rva</li>
    <li>Kabob</li><li>Somsa</li><li>Chuchvara</li><li>Norin</li>
    <li>Dimlama</li><li>Mastava</li><li>Qazi</li><li>Salat</li>
    <li>Non</li><li>Ko'k choy</li><li>Qora choy</li>
    <li>Kompot</li><li>Sharbat</li><li>Holva</li>
  </ol>
  <a class="bron-havola" href="bron/">❌ Bron</a>
</main>

Nimaga qarang: boshida faqat yashil " Bron" ko'rinadi. Qizg'ish " Bron" qayerda? Oxirigacha suring — u main ning pastki chap burchagida, ro'yxat tugagan joyda. Uning containing block'i — main, oyna emas. Chrome'da o'lchadik: sahifa 300 piksel surilganda yashil tugma joyida qoldi, transform li ajdod ichidagisi esa 300 piksel tepaga ketdi.

Bu tuzoq real loyihalarda ko'p uchraydi. Animatsiya uchun sahifa o'ramiga transform qo'yiladi — va saytdagi hamma fixed tugma, chat oynasi, bildirishnoma birdaniga "yopishmay" qoladi. Xuddi shunday qiladiganlar: filter, backdrop-filter, perspective, will-change: transform, contain: paint. Tuzatish: fixed elementni shunday ajdodlardan tashqariga — body ning to'g'ridan-to'g'ri bolasi qilib qo'ying.

Tekshirib ko'ring: Telefondagi "Yuqoriga" tugmasi position: fixed; bottom: 1rem. Dizayner sahifa o'ramiga filter: grayscale(1) qo'shdi (hamma narsa kulrang bo'lsin). Tugma endi sahifa bilan birga suriladi. Nega?

3. position: sticky

3.1 Oqimdagi, lekin chegarada qotadigan element

position: sticky — gibrid. Element avval oddiy, oqimdagi element kabi turadi va joy egallaydi. Skroll uni top da berilgan chegaraga yetkazganda, u o'sha joyda "yopishib" qoladi. Qachongacha? Otasi — containing block'i — tugaguncha. Otasining pastki cheti kelganda, u ham ota bilan birga ketadi.

Avtobusdagi yo'lovchini tasavvur qiling: u o'z bekatigacha o'rindiqda o'tiradi (qotgan), lekin avtobusdan (otadan) tashqariga chiqolmaydi.

«Bahor» menyusi — ichida suriladigan oyna. Har bo'lim sarlavhasi yopishqoq:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .menyu-oyna {
    max-width: 18rem;
    max-height: 12rem;
    overflow-y: auto;
    border: 2px solid var(--rang-asosiy);
  }
  .menyu-oyna h2 {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 4px 12px;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
    font-size: 1rem;
  }
</style>
<div class="menyu-oyna" tabindex="0" role="region"
     aria-label="Menyu">
  <section>
    <h2>Issiq taomlar</h2>
    <ul>
      <li>Osh</li><li>Lag'mon</li><li>Manti</li>
      <li>Sho'rva</li><li>Kabob</li>
    </ul>
  </section>
  <section>
    <h2>Ichimliklar</h2>
    <ul>
      <li>Ko'k choy</li><li>Qora choy</li><li>Kompot</li>
      <li>Sharbat</li><li>Ayron</li><li>Limonli choy</li>
      <li>Qahva</li><li>Mineral suv</li><li>Kakao</li>
    </ul>
  </section>
</div>

Nimaga qarang: ro'yxatni suring — "Issiq taomlar" sarlavhasi oynaning tepasida qotadi. "Issiq taomlar" bo'limi tugashi bilan "Ichimliklar" sarlavhasi kelib, uni tepaga itarib chiqaradi va o'zi qotadi. Har sarlavha faqat o'z section i ichida yopishadi. menyu-oyna — shu misol uchun nom; rol va tabindex — Overflow darsidagi skroll o'rami qoidasi.

3.2 Sticky qoidalari

Sticky ishlashi uchun uchta narsa kerak:

1. Chegara. top (yoki bottom, left, right) berilishi shart. Chegarasiz sticky — oddiy relative: u hech qachon qotmaydi.
2. Skroll konteyner. Sticky eng yaqin skroll konteyneriga yopishadi. Ajdodlarda skroll konteyner bo'lmasa — sahifaning o'zi. Yuqoridagi misolda bu — .menyu-oyna.
3. Otada joy. Element faqat otasi ichida harakat qiladi. Ota elementning o'zidan baland bo'lmasa, qotadigan joy yo'q.

Sticky oqimdan chiqmaydi — bu uning absolute va fixed dan asosiy farqi. U relative kabi o'z joyini saqlaydi, qotganda esa shu joydan faqat ko'rinishda siljiydi. Shuning uchun uning atrofidagi kontent hech qachon sakramaydi.

Sticky qotmasa, uch qoidani shu tartibda tekshiring:

flowchart TD
  A["Sticky qotmayapti"] --> B{"top berilganmi?"}
  B -->|yo'q| B1["top: 0 yozing"]
  B -->|ha| C{"Ajdodda overflow bormi?"}
  C -->|ha| C1["O'ramga max-height<br/>yoki overflow: clip"]
  C -->|yo'q| D{"Ota elementdan balandmi?"}
  D -->|yo'q| D1["Sticky'ni o'ramning<br/>o'ziga bering"]
  D -->|ha| E["Qotadi ✓"]

Nimaga qarang: eng ko'p uchraydigan sabab — ikkinchisi, ajdoddagi overflow. Uni DevTools'da topish kerak bo'ladi.

3.3 Yopishqoq sayt sarlavhasi

Eng mashhur ishlatilishi — sahifaning header i:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  body {
    margin: 0;
  }
  header {
    position: sticky;
    top: 0;
    padding: 0.5rem 1rem;
    background-color: var(--rang-fon);
    border-bottom: 2px solid var(--rang-asosiy);
  }
  main {
    padding: 0 1rem;
  }
</style>
<header>
  <strong>Choyxona «Bahor»</strong> ·
  <a href="menyu/">Menyu</a> · <a href="bron/">Bron</a>
</header>
<main>
  <h1>Biz haqimizda</h1>
  <p>Choyxona 2009-yilda ochilgan. Jasur aka uni kichik
  oilaviy oshxona sifatida boshlagan edi.</p>
  <p>Oshpazimiz Rustam aka 20 yildan beri osh damlaydi.</p>
  <p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
  <p>Oilaviy bazm va tug'ilgan kunlar uchun alohida xona
  bor — 20 kishigacha.</p>
  <p>Stolni oldindan band qilsangiz, joy albatta bo'ladi.</p>
  <p>Manzil va xarita — "Aloqa" sahifasida.</p>
  <p>Telefon: +998 90 000 00 00.</p>
  <p>Kelib, choyimizdan tatib ko'ring!</p>
</main>

Nimaga qarang: sahifani suring — sarlavha tepada qotib qoladi, matn uning ostidan o'tadi. header ning otasi — body, u butun sahifa balandligida, shuning uchun sarlavha oxirigacha yopishib turadi.

Fon rangi majburiy: usiz sarlavha shaffof, ostidan o'tayotgan matn harflari sarlavha yozuvi bilan aralashib ketadi. Sarlavhani yana z-index bilan boshqa elementlar ustiga chiqarish kerak bo'lishi mumkin — keyingi darsda.

3.4 Pastga yopishish: bottom: 0

Sticky faqat tepaga emas, istalgan chetga yopishadi. bottom: 0 — element oynaning pastki chetiga yetib kelmaguncha, o'sha chetda qotib turadi. Menyu jadvalining "Jami" qatorini tasavvur qiling: jadval uzun, "Jami" esa oxirida. tfoot td { position: sticky; bottom: 0; } yozsangiz, mehmon jadvalni o'qiyotganda "Jami" doim pastda ko'rinib turadi. Jadval tugagach, u o'z joyiga — oxirgi qatorga tushadi.

left: 0 esa gorizontal skrollda chap chetga qotiradi — keng jadvalning birinchi ustuni uchun. Buni 2-mashqda sinaysiz.

Tekshirib ko'ring: fixed sarlavha va sticky sarlavha — sahifa boshida, hali surilmaganda, qaysi birida birinchi paragraf sarlavha ostida qoladi?

4. Jadvalning yopishqoq sarlavhasi

4.1 Asosiy qoida

Sarlavha qatorini yopishtirish uchun position: sticky ni th larga beramiz:

thead th {
  position: sticky;
  top: 0;
  background-color: #fffaf0;
}

Nega thead ga emas, th ga? Kataklarga yozish — eng keng tarqalgan yo'l: har th o'zi qotadi va hamma brauzerda bir xil ishlaydi. Fon yana majburiy: usiz kataklar shaffof, ostidan o'tayotgan qatorlar ko'rinadi.

4.2 Tuzoq: .jadval-orami

«Bahor» menyusidagi jadval Overflow darsidan beri .jadval-orami ichida — telefonda gorizontal surilsin deb. Unga sticky qo'shamiz:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  .jadval-orami {
    overflow-x: auto;
  }
  thead th {
    position: sticky;
    top: 0;
    background-color: var(--rang-fon);
  }
  th,
  td {
    padding: 8px 12px;
    text-align: left;
  }
</style>
<div class="jadval-orami" role="region"
     aria-labelledby="narx-nomi" tabindex="0">
  <table>
    <caption id="narx-nomi">Narxlar</caption>
    <thead>
      <tr><th scope="col">Taom</th><th scope="col">Narx</th></tr>
    </thead>
    <tbody>
      <tr><td>Osh</td><td>35 000</td></tr>
      <tr><td>Lag'mon</td><td>28 000</td></tr>
      <tr><td>Manti</td><td>30 000</td></tr>
      <tr><td>Sho'rva</td><td>25 000</td></tr>
      <tr><td>Kabob</td><td>32 000</td></tr>
      <tr><td>Somsa</td><td>8 000</td></tr>
      <tr><td>Chuchvara</td><td>26 000</td></tr>
      <tr><td>Norin</td><td>30 000</td></tr>
      <tr><td>Dimlama</td><td>33 000</td></tr>
      <tr><td>Mastava</td><td>24 000</td></tr>
      <tr><td>Qazi</td><td>40 000</td></tr>
      <tr><td>Salat</td><td>12 000</td></tr>
      <tr><td>Ko'k choy</td><td>5 000</td></tr>
      <tr><td>Kompot</td><td>8 000</td></tr>
    </tbody>
  </table>
</div>

Nimaga qarang: sahifani suring — "Taom · Narx" qatori qotmaydi, u jadval bilan birga tepaga ketadi. Kodda xato yo'qdek.

Sababi — «Sticky qoidalari» dagi ikkinchi qoida. Overflow darsidan eslang: overflow-x: auto yozilganda overflow-y visible bo'lib qololmaydi — auto ga aylanadi. .jadval-orami skroll konteynerga aylandi va sticky endi sahifaga emas, unga yopishadi. O'ramning balandligi cheklanmagan: u ichida vertikal surilmaydi. Sticky kutayotgan skroll hech qachon bo'lmaydi. Chrome'da tekshirdik: .jadval-orami ning hisoblangan overflow-y qiymati — auto. Sahifa oxirigacha (176 piksel) surilganda sarlavha qatori oynaning tepasidan 148 piksel yuqorida qolib ketdi.

4.3 Yechim: o'ram o'zi surilsin

Sticky kerak bo'lsa, o'ramning o'ziga balandlik chegarasi beramiz — endi u ham gorizontal, ham vertikal suriladi, sarlavha esa uning tepasida qotadi:

<style>
  :root {
    --rang-asosiy-toq: #1a5d1a;
    --rang-fon: #fffaf0;
  }
  .jadval-orami {
    max-height: 12rem;
    overflow: auto;
  }
  .jadval-orami:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 2px;
  }
  thead th {
    position: sticky;
    top: 0;
    background-color: var(--rang-fon);
  }
  th,
  td {
    padding: 4px 12px;
    text-align: left;
  }
</style>
<div class="jadval-orami" role="region"
     aria-labelledby="narx-nomi" tabindex="0">
  <table>
    <caption id="narx-nomi">Narxlar</caption>
    <thead>
      <tr><th scope="col">Taom</th><th scope="col">Narx</th></tr>
    </thead>
    <tbody>
      <tr><td>Osh</td><td>35 000</td></tr>
      <tr><td>Lag'mon</td><td>28 000</td></tr>
      <tr><td>Manti</td><td>30 000</td></tr>
      <tr><td>Sho'rva</td><td>25 000</td></tr>
      <tr><td>Kabob</td><td>32 000</td></tr>
      <tr><td>Somsa</td><td>8 000</td></tr>
      <tr><td>Chuchvara</td><td>26 000</td></tr>
      <tr><td>Norin</td><td>30 000</td></tr>
      <tr><td>Dimlama</td><td>33 000</td></tr>
      <tr><td>Mastava</td><td>24 000</td></tr>
      <tr><td>Ko'k choy</td><td>5 000</td></tr>
      <tr><td>Kompot</td><td>8 000</td></tr>
    </tbody>
  </table>
</div>

Nimaga qarang: jadval o'z oynasida suriladi, "Taom · Narx" qatori oynaning tepasida qotadi. caption esa sarlavha ustida turgan edi — u surilib ketadi, bu normal.

Ikkinchi yo'l ham bor: o'ramga overflow-x: clip — u skroll konteyner yaratmaydi va sticky sahifaga yopishaveradi. Lekin clip gorizontal skrollni ham o'chiradi: telefonda jadval o'ng tomondan kesilib qoladi. Keng jadvalda buni qilmang.

Tekshirib ko'ring: Stajyor sticky sarlavhali sahifada gorizontal skrollni yo'qotish uchun body ga emas, main ga overflow-x: hidden yozdi. Endi main ichidagi sticky h2 lar qotmayapti. Nega va hidden o'rniga nima yozish kerak edi?

5. Sarlavha fokusni yopmasin

5.1 scroll-padding-top

Yopishqoq sarlavha — sahifaning bir qismini doim egallab turadi. Brauzer esa buni bilmaydi. Ikki holatda bu muammo:

• Langar havola. Menyuda "Ichimliklar" havolasini bosasiz (Sahifa ichidagi havolalar). Brauzer bo'limni oynaning eng tepasiga keltiradi — aynan sarlavha ostiga. Bo'lim nomi ko'rinmaydi.
• Klaviatura. Bobur Shift + Tab bilan orqaga qaytdi. Brauzer oldingi havolani oyna ichida "ko'rinadi" deb hisoblaydi, garchi u sarlavha ostida bo'lsa ham. Bobur fokus qayerdaligini ko'rmaydi — bu WCAG 2.4.11 ning buzilishi (Klaviatura va fokus).

scroll-padding-top skroll konteynerga aytadi: "tepadan shuncha joy band, surib keltirganda shu chiziqdan pastga keltir". Sahifa uchun u html ga yoziladi:

html {
  scroll-padding-top: 4.5rem;
}

Chrome'da ikkala holatni tekshirdik — sarlavhaning bo'yi 60 piksel:

Qiymat sarlavha bo'yidan biroz katta bo'lsin: bo'lim nomi sarlavhaga yopishib qolmasin. Sarlavha bo'yi ekran eniga qarab o'zgarsa, qiymatni ham rem da, zaxira bilan bering.

5.2 scroll-margin-top — bitta element uchun

scroll-padding-top butun skroll konteynerga yoziladi. scroll-margin-top esa nishon elementning o'ziga — "meni keltirganda tepamda shuncha joy qoldir":

:target {
  scroll-margin-top: 1rem;
}

Holat pseudo-klasslari darsidagi :target — hozir URL'dagi # ga mos element. Ikkalasini birga yozsa bo'ladi: sahifaga — sarlavha bo'yicha scroll-padding-top, alohida bo'limlarga — qo'shimcha bo'shliq. Ikkalasi qo'shiladi.

Qaysi birini tanlash:

• Sarlavha hamma joyni yopadi → html { scroll-padding-top } — bitta qoida, butun sayt.
• Faqat ba'zi bo'limlarga qo'shimcha joy kerak → ularga scroll-margin-top.

Baseline ma'lumotlariga ko'ra ikkala xususiyat ham 2021-yil aprelidan hamma asosiy brauzerda bor. Silliq surilish (scroll-behavior: smooth) va "magnitli" skroll — Skroll xulqi darsida.

6. Ko'p uchraydigan xatolar

6.1 sticky yozildi, top yo'q

Element qotmaydi. Tuzatish: top: 0 (yoki kerakli masofa).

6.2 Ajdodda overflow

Sticky qotmaydi, ayniqsa jadval o'rami yoki overflow-x: hidden li blok ichida. Tuzatish: DevTools'da ajdodlarni birma-bir tekshiring: Elements panelida elementni tanlang, yuqoridagi ajdodlarni bosib, Computed bo'limida overflow ni qidiring (DevTools'da CSS). O'ramga max-height bering (u o'zi surilsin) yoki hidden o'rniga clip.

6.3 Ota elementning o'zidek past

header ni div ga o'rab, sticky'ni header ga berdingiz — qotmaydi. Chrome'da tekshirdik: div ning bo'yi sarlavhanikidek, 300 piksel surilganda sarlavha ham 300 piksel tepaga ketdi. Tuzatish: sticky'ni o'ramning o'ziga bering yoki o'ramni olib tashlang.

6.4 Ajdodda transform yoki filter — fixed suriladi

Tuzatish: fixed elementni body ning to'g'ridan-to'g'ri bolasi qiling.

6.5 Shaffof sticky

Matn sarlavha yozuvi ustidan o'tadi. Tuzatish: sticky elementga fon rangi.

6.6 Fixed tugma oxirgi qatorni yopdi

Tuzatish: sahifaga tugma bo'yicha padding-bottom.

7. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): fixed mi yoki sticky mi?

1. Menyu jadvalining sarlavha qatori, jadval tugaganda ketsin —
2. Chat tugmasi — sahifaning qayerida bo'lmang, ekranning o'ng pastida —
3. Sayt sarlavhasi — boshida oqimda, surganda tepada qotsin —
4. Maqola bo'limi sarlavhasi — faqat o'z bo'limi ichida qotsin —

Ishora: "ota tugaganda ketadimi?" — sticky; "ekranga yopishadimi?" — fixed.

2-mashq (o'rta): Kompleks ovqat jadvali

Overflow darsidagi "Kompleks ovqat narxlari" jadvalida besh ustun bor, u .jadval-orami ichida. Jasur aka unga hafta kunlarining hammasini qo'shdi — endi yetti qator. Talab:

1. Telefonda jadval gorizontal surilsin (bu hozir ham bor).
2. Kun nomlari (th scope="row") chapda qotib tursin — gorizontal surganda ham qaysi kun ekanini ko'rish mumkin bo'lsin.
3. Sarlavha qatori tepada qotsin — o'ram 14rem dan baland bo'lmasin.

Ishora: sticky har o'qda ishlaydi — left: 0 gorizontal skrollda qotiradi. «O'ram o'zi surilsin» bo'limidagi yechim. Kataklarga fon bering.

.jadval-orami {
  max-height: 14rem;
  overflow: auto;
}

.jadval-orami table {
  min-width: 32rem;
}

thead th,
tbody th {
  position: sticky;
  background-color: #fffaf0;
}

thead th {
  top: 0;
}

tbody th {
  left: 0;
}

3-mashq (qiyin): Nega yopishmayapti?

Stajyorning CSS'i:

.sahifa {
  transform: translate(0);
  overflow-x: hidden;
}
header {
  position: sticky;
}
.chat-tugma {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

HTML: body ichida div class="sahifa", uning ichida header, main va a class="chat-tugma". Shikoyatlar: sarlavha qotmaydi; chat tugmasi sahifa bilan birga suriladi va faqat eng pastda ko'rinadi.

1. Nechta sabab topasiz? Har birini ayting.
2. .sahifa dagi ikki qatorga ham ehtiyoj bor deb faraz qiling (animatsiya va chetdan chiqib ketgan bezak). Qanday tuzatasiz?

Ishora: «Ajdoddagi transform», «Sticky qoidalari» va «O'ram o'zi surilsin» dagi clip haqidagi gap.

.sahifa {
  transform: translate(0);
  overflow-x: clip;
}
header {
  position: sticky;
  top: 0;
}

4-mashq: Portfolio qadami — o'qish rejasi jadvali

Portfolio'dagi "Men haqimda" sahifasida o'qish rejasi jadvali bor: hozircha ikki oy. Uni butun yilga to'ldiramiz va sarlavha qatorini yopishqoq qilamiz.

1. haqimda/index.html dagi jadvalga keyingi oylarni qo'shing — kamida 10 qator. Mavzularni o'z rejangizdan yozing. Holat ustunida — "Reja".
2. asosiy.css da sarlavha kataklari sahifani surganda tepada qotsin. Fon — portfolio foni.
3. Tekshiring: telefon enida (360) sahifani jadval bo'ylab suring — "Oy · Mavzu · Holat" qatori ko'rinib tursin.
4. Jadval hozir overflow o'ramsiz. Kelajakda uni o'ramga solsangiz, nima qilish kerakligini bir gap bilan yozing (izoh sifatida).

Ishora: «Jadvalning yopishqoq sarlavhasi» bo'limi. Fon — --rang-fon.

<tr>
  <th scope="row">Noyabr</th>
  <td>CSS dizayn va landing</td>
  <td>Reja</td>
</tr>
<tr>
  <th scope="row">Dekabr</th>
  <td>Git va GitHub</td>
  <td>Reja</td>
</tr>

/* Jadval sarlavhasi sahifada qotadi.
   Jadvalni overflow o'ramga solsangiz — o'ramga max-height
   bering, aks holda sticky ishlamaydi. */
thead th {
  position: sticky;
  top: 0;
  background-color: var(--rang-fon);
}

8. Real ishda

• Yopishqoq sarlavha — deyarli har bir yangilik sayti, do'kon va ijtimoiy tarmoqda. Ko'pincha u surib tushganda yashirinib, tepaga surganda qaytib chiqadi — buni JavaScript qiladi (Navbar va mobil menyu).
• Admin panellardagi jadvallar — sarlavha qatori va birinchi ustun sticky: minglab qatorli ro'yxatda ham ustun nomi ko'rinib turadi.
• Fixed — chat tugmasi, "Yuqoriga" tugmasi, cookie banneri, mobil ilovadagi pastki menyu. Modal oynalar uchun esa bugun boshqa, z-index'siz yo'l bor — Top layer.
• Intervyuda so'raladi: "sticky nega ishlamayapti?" (klassik debugging savoli), "fixed va sticky farqi?", "transform ota fixed ga qanday ta'sir qiladi?".

Xulosa

• fixed — oynaga yopishadi, oqimdan chiqadi, joy egallamaydi. Natija oynasida — shu oynaga nisbatan.
• Ajdoddagi transform, filter, will-change: transform fixed ni o'sha ajdodga bog'lab qo'yadi.
• sticky — oqimda turadi, top chegarasida qotadi, otasi tugaganda ketadi. Eng yaqin skroll konteynerga yopishadi.
• Sticky ishlamasa: top bormi, ajdodda overflow bormi, otada joy bormi.
• Jadval sarlavhasi: thead th { position: sticky; top: 0; } + fon; o'ram bo'lsa — o'ramga max-height.
• html { scroll-padding-top } — langar va fokus yopishqoq sarlavha ostida qolmasin; scroll-margin-top — bitta element uchun.

Keyingi dars: z-index va stacking context — qaysi element ustda chiziladi va nega "z-index: 9999" ham ba'zan yordam bermaydi.

Manbalar

• MDN: "position", "Containing block", "scroll-padding-top", "scroll-margin-top" — developer.mozilla.org
• W3C: "CSS Positioned Layout Module Level 3" (sticky va fixed) — w3.org/TR/css-position-3
• W3C: "WCAG 2.2 — 2.4.11 Focus Not Obscured (Minimum)" — w3.org/TR/WCAG22
• web-features (Baseline ma'lumotlari): "sticky-positioning", "fixed-positioning", "scroll-snap" (scroll-padding, scroll-margin) — github.com/web-platform-dx/web-features