CSS position: static, relative, absolute, fixed va sticky

Qisqa javob

position xususiyati ikki narsani hal qiladi: element oddiy oqimda qoladimi va top, right, bottom, left nimadan hisoblanadi.

Har bir qiymat misolda

static. Elementlar hujjatdagi matn kabi ketma-ket keladi. Bunday elementga top va z-index ta’sir qilmaydi.

relative. Element vizual suriladi, lekin uning asl joyi bo‘sh qoladi — qo‘shnilar qimirlamaydi.

.note { position: relative; top: 8px; left: 8px; }

relative ning asosiy amaliy foydasi — elementni absolute pozitsiyalangan bolalar uchun tayanch qilish.

absolute. Element oqimdan chiqariladi: qo‘shnilar u yo‘qdek yaqinlashadi. Koordinatalar position qiymati static bo‘lmagan eng yaqin ajdoddan hisoblanadi.

.card { position: relative; }
.card .badge { position: absolute; top: 12px; right: 12px; }

fixed. Element oynaga mahkamlanadi va aylantirganda qimirlamaydi. Uning ostida kontent qoladi, shuning uchun qat’iy shapka balandligini oraliq bilan qoplash kerak.

sticky. Gibrid: element chegaraga (masalan, top: 0) yetguncha oqimda bo‘ladi, keyin yopishadi — lekin faqat ota element doirasida.

.table-head { position: sticky; top: 0; }

Containing block: koordinatalar nimadan hisoblanadi

Containing block — koordinatalar va foizlar hisoblanadigan to‘rtburchak.

• absolute uchun — position qiymati static bo‘lmagan eng yaqin ajdod. Bunday ajdod bo‘lmasa — sahifaning boshlang‘ich bloki, va element hujjat burchagiga «uchib ketadi».
• fixed uchun — brauzer oynasi. Lekin biror ajdodda transform, filter yoki perspective bo‘lsa, fixed shu ajdoddan hisoblanadi va aylantirganda qat’iy bo‘lmay qoladi.
• Xuddi shu xususiyatlar (transform, filter) ajdodni absolute uchun ham tayanchga aylantiradi.

z-index va stacking context

z-index ustma-ust joylashish tartibini boshqaradi, lekin faqat pozitsiyalangan elementlarda (shuningdek flex va grid elementlarida) ishlaydi.

Asosiy tushuncha — stacking context. Bu ichida z-index qiymatlari faqat o‘zaro solishtiriladigan «qatlam». Yangi kontekstni, masalan, quyidagilar yaratadi:

• auto dan farqli z-index bilan birga position: relative/absolute;
• position: fixed va sticky;
• 1 dan kichik opacity, transform, filter;
• isolation: isolate.

Shuning uchun z-index: 9999 li modal oyna shapka ostida qolishi mumkin: agar u o‘z konteksti va z-index: 1 bo‘lgan ota element ichida tursa, shapkada esa z-index: 2 bo‘lsa, bola ota elementdan yuqoriga chiqa olmaydi. Yechim — sonni kattalashtirish emas, modalni hujjat ildiziga yaqinroq ko‘chirish yoki ota elementlarning z-index ini tuzatish.

Nega sticky yopishmaydi

Ro‘yxat bo‘yicha tekshiring:

1. Chegara berilmagan. top (yoki bottom) siz sticky relative kabi ishlaydi.
2. Ajdodda overflow: hidden, auto yoki scroll bor. Sticky oynaga emas, eng yaqin aylantiriladigan ajdodga yopishadi. Agar bu ajdodning o‘zi aylantirilmasa, effekt bo‘lmaydi.
3. Ota element elementning o‘zidan baland emas. Sticky faqat ota element ichida harakatlanadi. Ota element balandligi elementga teng bo‘lsa, yopishishga joy yo‘q.
4. Element flex-konteynerda cho‘zilgan. Flex qatorida elementlar standart bo‘yicha butun balandlikka cho‘ziladi. align-self: flex-start yordam beradi.

Nega absolute «sakraydi»

• Ota elementda position: relative yo‘q — koordinatalar uzoqroq ajdoddan yoki sahifadan hisoblanadi.
• top/left berilmagan — element oqimda turadigan joyida qoladi va qo‘shni kontent bilan birga siljiydi.
• Foizlar elementning o‘zidan emas, containing block o‘lchamidan hisoblanadi. Markazlash uchun aniq o‘lchamlar bilan inset: 0; margin: auto yoki transform: translate(-50%, -50%) dan foydalaning.