موقعیت دهی عناصر

موقعیت دهی (position)

قسمت های یک سند html را می توان به مانند قطعات یک پازل ابتدا ساخت و در ادامه در جای مورد نظر قرار داد که این کار با position ها به راحتی انجام می پذیرد برای اینکه بتوانید اینگونه چیدمان کنید باید با تمامی positionها آشنایی کامل داشته باشید.

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

position

در زمان استفاده از موقعیت دهی برای چیدمان سایت ویژگی هایی وجود دارند که احتمالا با آن ها سروکار خواهید داشت که این ویژگی ها را در جدول زیر مشاهده می کنید :

خصوصیت توضیحات
bottom لبه حاشیه پایین را برای یک جعبه موقعیت تنظیم می کند
clip طریقه برش یک عنصر را مشخص می کند
left لبه حاشیه چپ را برای یک جعبه موقعیت تنظیم می کند
position نوع پوزیشن را برای عناصر مشخص می کند
right لبه حاشیه راست را برای یک جعبه موقعیت تنظیم می کند
top لبه حاشیه بالا را برای یک جعبه موقعیت تنظیم می کند
z-index میزان جابجایی در راستای محور z عمود بر صفحه را مشخص می کند

حال نوبت آن رسیده که خصوصیت های موقعیت دهی را بررسی کنیم و ببینیم چه مقادیری را می توانند بگیرند :

 

انواع position ها

1. استاتیک (static) : تمامی عناصر دارای این position به صورت پیش فرض هستند و همیشه مطابق جریان معمول نمایش داده می شوند یا به عبارتی در همان جایی که کد آنها در سند html قرار دارد نمایش داده می شوند. دیگر خصوصیت های فوق برای این نوع عناصر بی تاثیر خواهند بود.

2. نسبی (relative) : این position مکان عناصر را نسبت به موقعیت اولیه خود عنصر و دیگر همسایه های static و relative ش در نظر می گیرد. برای این عناصر می توان از تمامی ویژگی ها استفاده نمود به صورتی که نقطه مبدا مختصات برای آنها همان مکان اولیه آن عناصر است.

3. مطلق (absolute) : این position عنصر را تکی در نظر گرفته و تعیین موقعیت مکان آن وابسته به اولین والد اوست که موقعیت دهی نسبی relative گرفته باشد. یعنی جابجا شدن عنصر نسبت به اولین پدری از اجدادش که حالت relative دارد انجام گرفته و مختصات مبدا آن هم نقطه صفر top و left عنصر پدر می باشد.

4. ثابت (fixed) : مانند موقعیت دهی مطلق بوده با این تفاوت که تعیین موقعیت مکان آن وابسته به صفحه مرورگر می باشد و حتی با اسکرول کردن مکان عنصر fix شده، تغییر نمی کند.

مـــهم چند مورد دیگر از position ها را ممکن است مشاهده کرده باشید مانند sticky اما به دلیل آنکه مرورگر های مختلف هنوز از آن ها پشتیبانی نمی کنند به آن ها اشاره ای نکرده ایم.

برای درک بهتر از موقعیت دهی می توانید با کلیک بر روی هر یک از اسامی positionهای فوق مثالی از آن را خودتان امتحان کنید.

روی هم قرار دادن عناصر

در زمان استفاده از موقعیت دهی شما می توانید چند عنصر را به صورت کامل یا بخشی از آن ها را روی یکدیگر قرار دهید. در این موارد اگر خصوصیت z-index را تنظیم نکرده باشیم، عنصری که کد HTML آن بعد از دیگری آمده، بالاتر قرار خواهد گرفت و دیگر عناصر زیر آن عنصر قرار خواهند داشت.

اما با تنظیم خصوصیت z-index می توانید ترتیب نمایش عناصر را مشخص می کنید. مقادیر مجاز برای این ویژگی تمامی اعداد منفی و مثبت می باشد.

همچنین بخوانید...!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *