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

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

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

نام: position: fixed

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

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

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

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

 

HTML

یک المان فیکس شده در صفحه که تحت هیچ شرایطی تغییر مکان نمی‌دهد

CSS

div.fixed {
    position: fixed;
    bottom:  ۰;
     right:  ۰;
     width:  ۳۰۰px;
     border:  ۳px solid #8AC007;
}

یک المان فیکس شده در صفحه که تحت هر شرایطی تغییر مکان نمی‌دهد

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

position: absolute

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

نام: position: absolute

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

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

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

HTML

 

المان مادر که دارای موقعیت ریلیتیو است

المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود

CSS

div.relative {
    position: relative;
    width:  ۴۰۰px;
     height:  ۲۰۰px;
     border:  ۳px solid #8AC007;

div.absolute  {
    position:  absolute;
     top:  ۸۰px;
     right:  ۰;
     width:  ۲۰۰px;
     height:  ۱۰۰px;
     border: ۳px solid #8AC007;
}

المان مادر که دارای موقعیت ریلیتیو است

المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود

  

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

به این پست امتیاز دهید.
بازدید : 200 views بار دسته بندی : مجله برنامه نویس تاريخ : 2 جولای 2021 به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.

برچسب ها