Formsda konteynerlar bilan ishlash

Kerakli bilimlar:
HTML asoslari (HTMLga o'rganishga kirish ), CSS qanday ishlashi haqida fikr ( CSS ga kirish .)
Vazifa:	CSS joylashuvi qanday ishlashini bilib oling.

Mashqlarni mahalliy shaxsiy kompyuteringizda kuzatib borishingizni 0_basic-flow.htmlxohlaymiz, iloji bo'lsa, bizning GitHub omborimizdan nusxa oling (manba kodi bu yerda) va undan boshlang'ich nuqta sifatida foydalaning.
Joylashtirishga kirish
Joylashtirishning butun g'oyasi qiziqarli effektlarni yaratish uchun yuqorida tavsiflangan asosiy hujjat oqimining xatti-harakatlarini bekor qilishga imkon berishdir. Agar siz birlamchi tartib oqimidagi joylashuviga nisbatan tartib ichidagi ba'zi qutilarning o'rnini biroz o'zgartirmoqchi bo'lsangiz nima bo'ladi? Sizning vositangiz joylashishni aniqlaydi. Yoki sahifaning boshqa qismlari ustida suzuvchi va/yoki sahifa qanchalik aylantirilishidan qat'iy nazar har doim brauzer oynasida bir joyda qoladigan foydalanuvchi interfeysi elementini yaratmoqchi bo'lsangiz? Joylashtirish bunday tartiblarni amalga oshirishga imkon beradi.
HTML elementlariga qo'llashingiz mumkin bo'lgan turli xil joylashishni aniqlash turlari mavjud . Elementda joylashishni aniqlashning muayyan turini faollashtirish uchun biz dan foydalanamiz position .
Statik joylashishni aniqlash
Statik joylashishni aniqlash har bir elementning sukut bo'yicha olinadi, bu shunchaki "hujjatni joylashtirish oqimida elementni normal holatiga qo'ying - alohida e'tiborga olish kerak bo'lmagan narsa" degan ma'noni anglatadi.
Buni namoyish qilish va kelajakdagi bo'limlar uchun namunangizni sozlash uchun avval HTML- class positioneddagi ikkinchisiga qo'shing:

...

Buferga nusxalash
Endi CSS-ning oxiriga quyidagi qoidani qo'shing:
.positioned {
position: static;
background: yellow;
}
Buferga nusxalash
Va agar siz hozir saqlasangiz va yangilasangiz, 2-bandning yangilangan fon rangidan boshqa hech qanday o'zgarishlarni ko'rmaysiz. Bu normal holat, yuqorida aytib o'tganimizdek, statik joylashuv sukut bo'yicha harakatdir!