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

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

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

نام: position: fixed

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

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

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

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

 

HTML

<div class=fixed"> <p>یک المان فیکس شده در صفحه که تحت هیچ شرایطی تغییر مکان نمی‌دهد</p> </div>

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

 <div class="relative"> <p>المان مادر که دارای موقعیت ریلیتیو است</p> <div class="absolute"> <p>المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود </p> </div> </div>

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) به میزان ۸۰ پیکسل و از سمت راست این المان نیز فاصله نداشته باشد. بدین ترتیب المان شما به سمت راست المان مادر و با فاصله ۸۰ پیکسلی از بالای آن می‌چسبد.