در طراحی سایت و صفحات وب، با استفاده از ویژگی position می توانیم موقعیت مکانی و شیوه قرارگیری یک عنصر در صفحه را تعیین کنیم. این موقعیت ها می توانند بصورت (static, relative, fixed absolute, sticky) باشند.
ویژگی position
برای ویژگی position پنج مقدار موقعیت دهی وجود دارد: (انواع شیوه های قرارگیری عناصر)
- Static (ایستا)
- Relative (نسبی)
- Fixed (ثابت)
- Absolute (مطلق)
- Sticky (چسبنده)
پس از آنکه یکی از مقادیر بالا را برای ویژگی position تعیین کردیم، می توانیم با استفاده از مشخصه های top, bottom, left و right عنصر مورد نظر را جابه جا کنیم. بنابراین مشخصه های (top, bottom, left و right) تا قبل از اینکه ویژگی position تعیین نشود کار نمی کنند.
مقدار static برای position (موقعیت ایستا)
عنصرهای HTML بصورت پیش فرض به حالت static قرار دارند. عنصرهای Static توسط مشخصه های top, bottom ،left و right تاثیر نمی گیرند و جابجا نمی شوند. عنصر با وضعیت position: static در هیچ موقعیت خاصی قرار نگرفته و همیشه طبق حالت معمولی صفحه قرار می گیرد، یعنی به عبارتی عنصر در همان جایی که از ابتدا تعیین شده بود قرار دارد.
در کد بالا مقدار ویژگی position برابر با static قرار داده شده است. همانظور که گفته شد، مقدار ویژگی position به صورت پیشفرض static در نظر گرفته می شود. بنابراین مشاهده می کنید که تغییر خاصی در نحوه قرارگیری عنصر div اعمال نشده است. نتیجه کد بالا به صورت زیر است:
مقدار relative برای position (موقعیت نسبی)
عنصری با position: relative نسبت به موقعیت فعلی خود تغییر موقعیت می دهد. تعیین کردن مشخصه های top, right bottom, و left برای اینگونه عنصرها باعث می شود تا عنصر از حالت عادی خود فاصله گرفته و بدون اینکه عنصر بر روی بقیه عناصر قرار گیرد، می تواند در جهت های گوناگون جابه جا شود. دقت نمایید که جای خالی این عنصر باقی می ماند و بقیه عناصر صفحه به منظور پر کردن فاصله به جا مانده توسط این عنصر نمی توانند تنظیم شوند.
در این مثال ویژگی position برای عنصر div برابر با مقدار relative در نظر گرفته شده است. سپس با استفاده از ویژگی left به آن فاصله 30px از چپ داده شده است. همانطور که در نتیجه کد مشاهده می کنید، این عنصر به شکل زیر تغییر موقعیت داده است:
مقدار fixed برای position (موقعیت ثابت)
عنصری با position: fixed، نسبت به viewport موقعیت دهی می شود؛(viewport ناحیه ای از صفحه است که توسط صفحه نمایش قابل مشاهده است.) این به این معنا است که عنصر حتی با اسکرول کردن جایگاهش تغییری نمی کند. مشخصه های top, right, bottom و left برای تغییر موقعیت مکانی عنصر استفاده می شوند. عنصر fixed فاصله ای را در صفحه ای که قرار می گیرد به جای نمی گذارد.
در این مثال، ویژگی position در عنصر div با کلاس fixed برابر با مقدار fixed در نظر گفته شده است و با استفاده از ویژگی های bottom و right که هر دو مقدار 0 را دریافت کرده اند، به گوشه پایین سمت راست انتقال داده شده است. این عنصر به پایین ترین و راست ترین نقطه صفحه منتقل شده است. در زیر می توانید نتیجه کد بالا را مشاهده فرمایید:
مقدار absolute برای position (موقعیت مطلق)
اگر ویژگی position را برابر با absolute قرار دهیم یعنی می خواهیم تگ مورد نظر را نسبت به تگ های html والد آن عنصر، موقعیت دهی کنیم. یک عنصر که position: absolute داشته باشد، نسبت به نزدیک ترین والد خود موقعیت دهی می شود. به هر حال، اگر یک عنصر که position: absolute داشته باشد و هیچ والدی نداشته باشد، موقعیت آن نسبت به body سنجیده می شود.
یک مثال ساده:
در این مثال 2 عنصر div درون هم قرار گرفته اند که عنصر والد position: relative و عنصر درون آن position: absolute گرفته است. همانطور که در تصویر مشاهده می کنید، عنصر absolute، درون والد خود جابجا می شود و موقعیت مکانی آن با استفاده از ویژگی های top, right, bottom و left تغییر می کند. در واقع این عنصر نسبت به والد خود تغییر موقیت مکانی را تجربه می کند. در طراحی سایت و صفحات وب، ترکیب relative و absolute بسیار کاربردی است.
مقدار sticky برای position (چسبنده)
عنصری با position: sticky موقعیتش براساس موقعیت اسکرول کاربر تعیین می شود. یعنی به این صورت که عنصر در هنگام اسکرول شدن به بالای صفحه متصل می شود و مکانش نسبت به اسکرول تغییر می کند.
در این مثال، عنصر که position: sticky را دارد، در سر جای خود باقی می ماند تا پس از حرکت اسکرول کاربر، زمانی که فاصله عنصر از بالای صفحه به صفر رسید (top: 0) این عنصر دیگر به بالای صفحه می چسبد و پایین می آید. مقدار top دست خودمان است و می توانید به عنوان مثال عدد 10px را برای آن قرار دهیم. در زیر نتیجه کد را مشاهده می کنید:
Overlapping Elements (روی هم قرار گرفتن عناصر)
وقتی عناصر موقعیت دهی شدند، می توانند بقیه عنصرها را همپوشانی کنند و روی همدیگر قرار گیرند. مشخصه z-index تعیین می کند که کدام عنصرها باید در جلو و کدام عنصرها باید در عقب قرار بگیرد. در حقیقت z-index اولویت قرارگیری عناصر را نسبت به هم تنظیم می کند. به مثال زیر دقت کنید:
در این مثال با قرار دارد مقدار z-index روی -1، موقعیت تصویر زیر متن تنظیم شده است.
حال برای تغییر این ترتیب و اولویت به مثال زیر دقت کنید:
در این مثال، مقدار z-index تغییر کرده و برابر با 1 درنظر گرفته شده است که اولویت آن را نسبت به متن بالاتر قرار می دهد و تصویر باید روی متن قرار گیرد. در زیر می توانید نتیجه کد بالا را مشاهده کنید:
قرار دادن متن روی تصویر در طراحی سایت
قرار دادن متن روی تصاویر در طراحی سایت بسیار مهم است و ممکن است شما را با چالش هایی روبرو کند. در زیر با 2 مثال این بخش را به شما آموزش می دهیم:
در این مثال متن درون container در بالا سمت چپ عکس قرار گرفته است:
به عنوان مثال نحوه قرار دادن متن در "مرکز" تصویر بالا به این شکل می باشد:
در این مثال متن درون container در وسط عکس قرار گرفته است:
تمام ویژگی های موقعیت دهی در CSS به صورت خلاصه در جدول زیر بیان شده است:
