زنگ CSS: جلسه دوازدهم - تعیین موقعیت المان با دستور fixed و absolute


در جلسه‌ی قبل، نحوه‌ی تعیین موقعیت المان‌ها توسط دستور relative‌ را فرا گرفتیم. در این بخش قصد داریم تا بگوییم که چگونه می‌توان یک المان را به صورت فیکس شده در یک جای صفحه قرار داد. همچنین نحوه‌ی قرارگیری المان از طریق دستور absolute را فرا خواهیم گرفت. با ما همراه باشید.

حتما شما هم به صفحاتی که یک بخش ثابت دارند برخورده‌اید. غالب‌ترین مثال این موضوع را در منوهایی که در بالای سایت همراه اسکرول کردن صفحه در جای خود ثابت می‌مانند و محو نمی‌شوند، دیده‌ایم. ما در این آموزش ابتدا سراغ ایجاد چنین المان‌هایی رفته‌ایم.

المان فیکس شده:

نام: position: fixed

این دستور چه کاری انجام می‌دهد؟‌ نحوه و محل قرار گیری المان های شما رامشخص می‌کند. ما در این قسمت با موقعیت فیکس شده کار داریم.

چه چیزهایی را در مقابلش بنویسیم؟  در قدم اول از دستور fixed استفاده می‌کنیم. سپس جایی که المان ما باید فیکس شود را برایش مشخص می‌کنیم. نحوه مشخص کردن مکان المان نیز بدین صورت است که فاصله مورد نظرمان را از سمت چپ، راست یا بالا و پایین برای المان مشخص می‌کنیم. 

نمونه نوشتن این دستور: Position: fixed و سپس مقدار فاصله از راست، چپ، بالا و  پایین 

در این حالت المان اچ تی ام ال شما به صورت ثابت در جای خود می‌ایستد و به هیچ قیمتی تکان نمی‌خورد!‌حتی اگر صفحه را اسکرول هم کنید این المان حرکت نمی‌کند و محو نمی‌شود. از این المان برای  مواقعی که طراح قصد دارد یک تکه از صفحه را در هر قسمتی از صفحه در اختیار کاربران قرار دهد (مثل تبلیغات گوشه صفحه یا صفحه چت آنلاین پشتیبانی ) استفاده می‌شود. ما در این قسمت هم یک المان فیکس شده در گوشه سمت راست صفحه قرار داده‌ایم که با قاب سبز رنگ مشاهده می‌کنید. 

HTML


ویدیو مرتبط :
‫آموزش طراحی سایت با CSS | تعیین موقعیت ثابت "fixed" عناصر صفحه با CSS‬‎