زنگ CSS: جلسه دوازدهم - تعیین موقعیت المان با دستور fixed و absolute
حتما شما هم به صفحاتی که یک بخش ثابت دارند برخورده‌اید. غالب‌ترین مثال این موضوع را در منوهایی که در بالای سایت همراه اسکرول کردن صفحه در جای خود ثابت می‌مانند و محو نمی‌شوند، دیده‌ایم. ما در این آموزش ابتدا سراغ ایجاد چنین المان‌هایی رفته‌ایم.
المان فیکس شده:
نام: position: fixed
این دستور چه کاری انجام می‌دهد؟ نحوه و محل قرار گیری المان های شما رامشخص می‌کند. ما در این قسمت با موقعیت فیکس شده کار داریم.
چه چیزهایی را در مقابلش بنویسیم؟ در قدم اول از دستور fixed استفاده می‌کنیم. سپس جایی که المان ما باید فیکس شود را برایش مشخص می‌کنیم. نحوه‌ی مشخص کردن مکان المان نیز بدین صورت است که فاصله‌ی مورد نظرمان را از سمت چپ، راست یا بالا و پایین برای المان مشخص می‌کنیم.
نمونه نوشتن این دستور: Position: fixed و سپس مقدار فاصله از راست، چپ، بالا و پایین
در این حالت المان اچ تی ام ال شما به صورت ثابت در جای خود می‌ایستد و به هیچ قیمتی تکان نمی‌خورد!حتی اگر صفحه را اسکرول هم کنید این المان حرکت نمی‌کند و محو نمی‌شود. از این المان برای مواقعی که طراح قصد دارد یک تکه از صفحه را در هر قسمتی از صفحه در اختیار کاربران قرار دهد (مثل تبلیغات گوشه‌ی صفحه یا صفحه‌ی چت آنلاین پشتیبانی) استفاده می‌شود. ما در این قسمت هم یک المان فیکس شده در گوشه سمت راست صفحه قرار داده‌ایم که با قاب سبز رنگ مشاهده می‌کنید.
HTML
یک المان فیکس شده در صفحه که تحت هیچ شرایطی تغییر مکان نمی‌دهد
CSS
div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #8AC007;}
یک المان فیکس شده در صفحه که تحت هر شرایطی تغییر مکان نمی‌دهد
همانطور که متوجه شده‌اید، در این مثال ما ابتدا به المان خود گفته‌ایم که یک موقعیت فیکس داشته باشد. بعد برایش مشخص کرده‌ایم که در کجای صفحه فیکس شود. این المان از سمت پایین و راست صفحه مرورگر فاصله ندارد و عدد صفر در مقابل آن نوشته شده است. بدین ترتیب المان شما در گوشه‌ی پایین سمت راست مرورگر می‌چسبد. اگر مثلا از سمت راست بدان فاصله ۲۰ پیکسلی می‌دادیم، المان ۲۰ پیکسل از سمت راست فاصله می‌گرفت. اگر از سمت چپ بدان فاصله می‌دادیم المان از سمت چپ فاصله می‌گرفت.
position: absolute
موقعیت قطعی زمانی است که شما می‌گویید این المان باید در این نقطه قرار بگیرد. در این حالت المان شما نسبت به المان مادر خود که موقعیت relative دارد، موقعیتش را تنظیم می‌کند. اگر هیچ المان مادری با موقعیت relative وجود نداشته باشد، این المان خود را نسبت به body یا همان کل صفحه تنظیم می‌کند.
نام: position: absolute
این دستور چه کاری انجام می‌دهد؟ نحوه و محل قرارگیری المان های شما رامشخص می‌کند. ما در این قسمت با موقعیت قطعی شده کار داریم.
چه چیزهایی را در مقابلش بنویسیم؟ در قدم اول یک المان مادر ایجاد می‌کنیم که دارای موقعیت relative (در جلسه قبل توضیح داده‌ایم) باشد. بدین ترتیب المان ما می‌تواند نسبت به این المان فاصله‌‌ای دلخواه بگیرد. در قدم بعدی یک المان دیگر ایجاد می‌کنیم که موقعیتش به صورت absolute باشد. این المان موقعیت خود را از سمت راست، چپ، بالا یا پایین بر اساس المانی که دارای موقعیت relative بود تنظیم می‌کند.
نمونه نوشتن این دستور: Position: absolute و سپس مقدار فاصله از راست، چپ، بالا و پایین
HTML
المان مادر که دارای موقعیت ریلیتیو است
المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود
CSS
div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #8AC007;} div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #8AC007;}
المان مادر که دارای موقعیت ریلیتیو است
المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود
در این مثال همانطور که می‌بینید ما اول یک المان مادر ایجاد کرده‌ایم که موقعیت relative دارد. بدین ترتیب این المان می‌تواند در دل خودش المان دیگری را داشته باشد که موقعیتش به موقعیت این المان وابسته باشد. سپس ما این المان را با موقعیت absolute ایجاد کرده‌ایم و به المان خود گفته‌ایم که از سمت بالای المان مادر( دارای موقعیت relative) به میزان ۸۰ پیکسل و از سمت راست این المان نیز فاصله نداشته باشد. بدین ترتیب المان شما به سمت راست المان مادر و با فاصله ۸۰ پیکسلی از بالای آن می‌چسبد.
نظرات