CSS Position , z-index,overflow
position- joylashuv elementni yuqori past chap ong tomonga qanday olchamda joylashtirishni belgilaydi
position:static; {relative} , {fixed} , {absolute} , {}
position: static; — boshlangich qiymat
relative - (nisbiy) element ozining hozirgi (normal) joylashuviga nisbatan joylashadi
elementning yuqori tomonidan 20px ong tomonidan 30px joy qodirilib suriladi position:relative hossasi yozilmasa style ishlamaydi bu top buttom qiymatlar margin-top margin-buttom ga oxshab ketadi ammo margin-top qiymatida margin elementga va undan keyingi joylashga elementga ham tasir qiladi yaniy uni ham pastga surib qoyadi
position:relative; top;20px; da esa faqat shu elementni suradi va hatto 2chi elementni ustiga chiqib qolishi ham mumkin
qiymatlar manfiy bolishi ham mumkin bunda joylashuv taskari qiymatnini qabul qiladi misol uchun top:50px: tepadan 50px joy qolishi kk bolsa top:-50px;tepaga 50px kotariladi
fixed - korinib turgan ekranga nisbatab scroll(tepaga pastga tushurganda) qilganda qimirlamay turadi
elementga position:fixed; db berilsa u inline yoki block holatidan inline-block holatiga o`tadi (yani block element kabi height width padding oladi va inline element kabi faqat contentni olchamidek olcham oladi)
absolute - ozidan oldin kelgan eng yaqin joylashgan biror position: relative; qiymat berilgan elementga nisbatan joylashadi agar berilmagan bolsa body ga nisbatan joylashadi
sticky - relative va fixed qiymatlarini ozida birlashtiradi yani relative malum vaqt ozining avvalgi joyiga nisbatan biz bergan top buttom right left da joylashadi va scroll qilganda malum olchamga yetganda (top:10px; element va body orasida 10px bolganda ) fixed yaniy biz bergan joyda qotib turadi
P.s. video orqali yaxshiroq tushinib olishingiz mumkin
z-index
z-index - ustma-ust tushib qolgan elementlarni ketma ketligini belgilab beradi qiymati qancha katta bolsa element shuncha oldin joylashadi aslida elementlar htmlda ustma ust tusholmaydi lekin ularni position ning ( static qiymatidan tashqari ) qiymatlari yordamida ustma-ust tushirish mumkin yani 1-index faqat position ( static qiymatidan tashqari ) berilgan elementgagina ishlaydi
overflow
overflow - cantent(qiymat) element ichiga sigmay qolganda element ozining holatini qanday tutishi kkligini belgilab beradi
visible - default qiymati sig`may qolgan content korinib turadi
hidden - yashiriladi va faqat sig`gan qiymatni contentga chiqazadi faqat qiymatni qolgan qismini foydalanuvchi korinishi imkoni mavjud emas
scroll - sigmay qolgan cantentni yashiradi va uni korish uchun bizga scroll qoshib beradi
scroll har doim content sigsa ham sigmasa ham foydalanuvchiga korinib turadi
auto - scroll bn deyarli bir xil faqat auto kkli bolgandagini bizga scroll qoyib beradi qolgan vaqtlar oddiy cantent kabi turaveradi