12-dars

O'zing nomla

1. position nima?

position — bu nima?

position — element qayerga va nimaga nisbatan joylashishini belgilaydi.

Oddiy qilib aytganda, brauzerga shunday deymiz:

"Bu elementni oddiy oqimda qoldiramanmi, yoki qo'lda joylashtiramanmi?"

Eng muhim fakt (90% xato shu yerda)

top / left / right / bottom position BO'LMASA → ISHLAMAYDI

Bu qoida 🔒

Default holat: position: static

Barcha elementlar default holatda:

position: static;

Bu nimani anglatadi?

• element normal document flowda turadi
• top, left, z-index ❌ ishlamaydi
• brauzer o'zi joylashtiradi

👉 Shuning uchun ko'p odamlar:

"top ishlamayapti" deydi — aslida position yo'q.

Normal document flow nima o'zi?

Brauzer sahifani yuqoridan pastga, chapdan o'ngga joylashtiradi:

• block → pastma-past
• inline → yonma-yon

Bu — normal flow.

position bo'lmasa: 👉 sen bu oqimga aralasha olmaysan.

Qachon position kerak bo'ladi?

Quyidagi vaziyatlarda:

• elementni siljitish
• ustma-ust chiqarish
• ekranga yopishtirish
• scroll bilan bog'lash

position ikki savolga javob beradi:

1️⃣ Element oqimda qoladimi yoki chiqadimi? 2️⃣ Agar siljisa — nimaga nisbatan siljiydi?

Keyingi darslarda:

• relative → oqimda qoladi
• absolute → oqimdan chiqadi
• fixed → viewportga yopishadi
• sticky → gibrid holat

2. position: relative aslida nimani o'zgartiradi?

Qisqa javob

position: relative elementni joyidan olib ketmaydi, lekin koordinata tizimi yaratadi.

Mana shu jumla — butun darsning mag'zi.

1️⃣ relative element oqimda qoladimi?

👉 HA.

.box {
  position: relative;
}

• element normal document flowda qoladi
• yonidagi elementlar unga moslashadi
• joyi saqlanib qoladi

Shuning uchun:

"relative qo'ydim, hech narsa o'zgarmadi" — deb o'ylaysan.

2️⃣ Unda relative nimaga kerak?

Ikki KATTA vazifasi bor 👇

🟡 Vazifa 1: O'ziga nisbatan siljish

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

Bu nimani anglatadi?

• element o'z joyidan 20px pastga
• va 10px o'ngga siljiydi
• asl joyi esa bo'sh qoladi

Ya'ni:

• ko'rinarli joyi siljidi
• layout joyi o'zgarmadi

Bu juda muhim farq.

🟡 Vazifa 2 (ENG MUHIMI): absolute uchun OTA bo'lish 👨‍👦

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

👉 Bu yerda nima bo'ldi?

.child viewport'ga emas

.parentga nisbatan joylashdi

❗ Agar .parentda position: relative bo'lmasa:

.child butun sahifaga nisbatan ketadi

Engine ichida nima bo'ladi? 🧠

Brauzer shunday deydi:

"Agar absolute bo'lsa — eng yaqin position bor otani top"

relative — xavfsiz ota.