CSSda elementlarni joylashishni qanday variantlari mavjud?

CSSda elementlarning pozitsiyasini belgilash uchun bir nechta asosiy variantlar mavjud:

• static — standart pozitsiya. Elementlar hujjat oqimida joylashadi, hech qanday siljishsiz.
• relative — element o'zining normal pozitsiyasiga nisbatan joylashadi. Top, left, bottom, right yordamida siljishi mumkin, shuningdek, oqimda o'rnini saqlaydi.
• absolute — element eng yaqin static bo'lmagan ota elementga nisbatan joylashadi (yoki bo'lmasa, oynaga nisbatan). Element oqimdan chiqariladi.
• fixed — element brauzer oynasiga nisbatan qattiqlashadi va skroll qilishda harakat qilmaydi. Shuningdek, oqimdan chiqariladi.
• sticky — element skroll qilish davomida belgilangan pozitsiyaga yetguncha relative kabi harakat qiladi, keyin fixed kabi bo'ladi.

Pozitsiyalashdan tashqari, elementlarni joylashtirish uchun ko'pincha quyidagilar ishlatiladi:

• Flexbox — bitta o'lchovda (qator yoki ustun) elementlar orasida joylashishni va bo'shliqni moslashtirish uchun moslashuvchan model.
• Grid — ikki o'lchovli tarmoq modeli, elementlarni qatorlar va ustunlar bo'yicha joylashtirish uchun.
• float — eski usul, elementlarni oqib o'tkazish uchun ishlatilgan, hozir kamroq qo'llaniladi.

Position dan foydalanish misoli:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}