درباره CSS Positions

تاریخ انتشار:

CSS Positions یکی از پارامترهای مهم برای شروع کار با css و پیاده‌سازی layout وب سایت هستش. به طور کلی position میتونه یکی از موارد زیر باشه:

  • static
  • relative
  • absolute
  • fixed

css position

static

به صورت پیش‌فرض position تگ‌ها به صورت static هستش و اگر display:block باشه عناصر یکی بعد از دیگری به صورت عمودی قرار میگیرن و اگر display:inline باشه عناصر به صورت افقی یکی بعد از دیگری به ترتیب قرار گیری در سند HTML در صفحه قرار میگیرن. در حالت static نمیشه از پارامترهای right ، left ، top و bottom استفاده کرد.

relative

شبیه به حالت static عمل می‌کنه با این تفاوت که میشه از پارامترهای right ، left ، top و bottom استفاده کرد و موقعیت عنصر را در صفحه تغییر داد. موقعیت عنصر بر اساس موقعیت عنصر والد ( Parent Element ) محاسبه میشه و بعد از تغییر موقعیت عنصر جای قبلی اون در صفحه حفظ میمونه و عنصر دیگه‌ای اونجا قرار نمیگیره.

absolute

شبیه به حالت relative عمل می‌کنه با این تفاوت که موقعیت عنصر بر اساس اولین عنصر والد با position:relative در DOM محاسبه میشه ( اگر والدی با position:relative نبود بر اساس صفحه ی مرورگر (تگ body) محاسبه میشه ) و موقعیت قبلی عنصر بعد از تغییر به absolute حذف میشه و دیگر عناصر جای اون رو تصاحب می‌کنن.

fixed

شبیه به حالت absolute با این تفاوت که در این حالت موقعیت عنصر بر اساس صفحه‌ای که کاربر میبینه محاسبه میشه و با اسکرول کردن صفحه تغییری در جای عنصر ایجاد نمیشه و fix میمونه

دیدگاه خود را ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد.