تعیین موقعیت و محل قرار گیری عناصر در صفحه
تعیین موقعیت و محل قرار گیری عناصر در صفحه
خاصیت های تعیین موقعیت (Positioning properties ) در CSS برای طراح وب این قابلیت را فراهم می کند که المان را در مکان مشخصی در صفحه جای گذاری کند . با استفاده از این المان همچنین می توان یک عنصر را پشت عنصر دیگری قرار داد، همچنین تعیین کرد درصورت بزرگ بودن محتوای یک المان چه باید رخ دهد .
المان ها را می توان با بهره گیری از خاصیت های top ، bottom ، left و right تعیین موقعیت کرد . با این وجود باید توجه داشت که این خواص تنها در صورتی کار می کنند که خاصیت position از پیش تنظیم شده باشد . این را هم باید گفت که بسته به روش تعیین موقعیت( positioning ) بکار برده شده، نحوه ی کارکرد آن ها تغییر می کند .
در کل چهار روش مختلف تعیین موقعیت وجود دارد که به ترتیب ذیل توضیح داده شده.
تعیین موقعیت / موقعیت دهی به صورت ایستا ( static positioning )
المان های HTML به صورت پیش فرض با این حالت(به صورت ایستا) در صفحه جای گذاری ( تعیین موقعیت ) می شوند . در این حالت المان در موقعیتی که مرورگر حین تنظیم نمایش صفحه با در نظر گرفتن محل قرار گیری دیگر عناصر یا محتوا به آن تخصیص داده می شود، جای می گیرد .
المان هایی که بدین ترتیب در صفحه قرار داده شده باشند، تحت تاثیر خاصیت های top ، bottom ، left وright قرار نمی گیرد .
تعیین موقعیت قرار گیری عنصر به صورت دقیق و ثابت( Fixed positioning )
المانی که مختصات fixed یا ثابت در صفحه داشته باشد، در واقع نسبت به موقعیت پنجره ی مرورگر تعیین مختصات می شود و در صورت بالا و پایین رفتن ( scroll) صفحه نیز هیچ حرکتی نکرده و از جای خود تکان نمی خورد.
مثال
| p.pos_fixed { position: fixed; top: 30px; right: 5px; } |
نکته: IE7 و IE8 هر دو فقط زمانی از مقدار fixed پشتیبانی می کنند که یک !DOCTYPE ( نوعی معرفی در ابتدای سند sgml یا html که یک شناسه ی عمومی یا سیستمی برای تعریف نوع سند / DTD اختصاص می دهد) تعریف شده باشد .
المان هایی که به صورت ثابت ( fixed ) در صفحه قرار داده شده باشند، در حقیقت از جریان ( flow ) عادی صفحه خارج می گردند .
المان هایی که موقعیت ثابت دارند می توانند روی دیگر عناصر قرار گیرند ( همپوشانی یاoverlapping ).
تعیین موقعیت یا موقعیت دهی به صورت نسبی ( relative positioning )
المانی که به صورت نسبی در صفحه ی HTML موقعیت دهی شده باشد می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد و یا با دیگر عناصر همپوش شود ( روی دیگر عناصر قرار گیرد )، با این وجود فضای رزرو شده در جریان عادی صفحه محفوظ می ماند .
مثال
| h2.pos_top { position: relative; top: 50px; } |
المان هایی که بدین ترتیب موقعیت دهی شده باشند، اغلب به عنوان دربرگیرنده های block ویژه ی عناصری که به صورت
مطلق ( absolute ) در صفحه قرار داده شده باشند بکار گرفته می شوند .
موقعیت دهی به صورت مطلق ( absolute positioning )
در این حالت عنصر نسبت به اولین المان بالای سر خود یا همان المان پدر( parent element) موقعیت دهی می گردد که نوع موقعیتی آن کاملاً متفاوت و غیر از حالت ایستا می باشد . در صورتی که چنین المانی یافت نشد، این عناصر نسبت به عنصر html تغییر موقعیت خواهد داد. ( block دربرگیرنده <html> خواهد بود.)
مثال
| h2 { position: absolute; left: 100px; top: 150px; } |
در این حالت موقعیت دهی نیز المان ها از جریان عادی صفحه حذف می گردند .
عناصر با موقعیت مطلق می توانند بر روی دیگر عناصر قرار گیرند یا با آن ها هم پوش شوند .
