Pozitsiya (position, z-index)

Shu paytgacha ko’rgan usullarimiz — Flexbox va 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

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

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

<style>
.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;
}
</style>

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.

absolute — oqimdan chiqish

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

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

<style>
.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;
}
</style>

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

fixed — ekranga qadalgan

fixed element oynaga qadaladi va sahifa aylantirilganda ham joyida qoladi:

<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>

<style>
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; }
</style>

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:

<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>

<style>
.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; }
</style>

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

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:

<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>

<style>
.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; }
</style>

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 — sahifani telefon, planshet va kompyuterga moslash hamda birinchi to’liq loyihamiz.