خانه » آموزش html و css » خصوصیت position در css
09 مهر 1400

خصوصیت position در css

ویژگی خصوصیت position در css نوع روش موقعیت یابی مورد استفاده برای یک عنصر (static, relative, fixed, absolute or sticky) را مشخص می کند.

خصوصیت position در css

ویژگی position نوع روش موقعیت یابی مورد استفاده برای یک عنصر را مشخص می کند. پنج مقدار موقعیت مختلف وجود دارد:

  • static
  • relative
  • fixed
  • absolute
  • sticky

سپس عناصر با استفاده از ویژگیهای بالا، پایین ، چپ و راست قرار می گیرند. با این حال، این ویژگی ها کار نمی کنند مگر اینکه ابتدا ویژگی موقعیت تنظیم شود. آنها همچنین بسته به ارزش موقعیت متفاوت عمل می کنند.

خصوصیت position: static

عناصر HTML به طور پیش فرض ایستا قرار دارند. عناصر موقعیت استاتیک تحت تأثیر ویژگیهای بالا ، پایین ، چپ و راست قرار نمی گیرند. عنصری با موقعیت: استاتیک؛ به هیچ وجه خاص قرار نگرفته است؛ همیشه مطابق جریان عادی صفحه قرار می گیرد:

خصوصیت position: relative

نسبت به موقعیت عادی خود قرار گرفته است. تنظیم ویژگیهای بالا ، راست ، پایین و چپ یک عنصر نسبتاً موقعیتی باعث می شود که آن را از موقعیت عادی خود دور کنید. محتوای دیگر به گونه ای تنظیم نمی شود که در هر شکاف ایجاد شده از عنصر جا بگیرد.

خصوصیت position: fixed

نسبت به نمای نمایش موقعیت دارد، به این معنی که حتی در صورت پیمایش صفحه همیشه در یک مکان باقی می ماند. از ویژگیهای بالا، راست، پایین و چپ برای موقعیت یابی عنصر استفاده می شود. یک عنصر ثابت در صفحه ای که معمولاً در آن قرار داشت فاصله نمی گذارد.

خصوصیت position: absolute

نسبت به نزدیکترین جد واقع شده (به جای موقعیت نسبت به نمای نما، مانند ثابت) قرار دارد. با این حال؛ اگر یک عنصر موقعیتی مطلق فاقد اجداد تعیین شده باشد، از بدنه سند استفاده می کند و همراه با پیمایش صفحه حرکت می کند.

توجه: عناصر position: absolute از جریان عادی حذف شده و می توانند عناصر را با یکدیگر همپوشانی کنند.

position در css

خصوصیت position: sticky

بر اساس موقعیت پیمایش کاربر قرار می گیرد. بسته به موقعیت پیمایش، یک عنصر چسبنده بین relative و fixed تغییر حالت می دهد. این موقعیت نسبی است تا زمانی که موقعیت افست داده شده در نمای نمایش برآورده شود سپس در جای خود “می چسبد” (مانند موقعیت: fixed).

امیدوارم این مقاله برای شما مفید بوده باشه راستی اگه میخوای به طور کامل به html و css مسلط بشی با دوره آموزشی html و css هم میهن همراه باش.

شهریار سلطانی

عضو هیات علمی در رشته مهندسی نرم افزار کانپیوتر و مدرس برنامه نویسی وب

دیدگاهتان را بنویسید

preloader