آموزش CSS پیشرفته : موقعیت یابی
موقعیتیابی به شما این امکان را میدهد که عناصر را از جریان عادی سند خارج کنید و کاری کنید که رفتار متفاوتی داشته باشند، برای مثال، روی یکدیگر قرار بگیرند یا همیشه در یک مکان در داخل نمای مرورگر باقی بمانند. این مقاله مقادیر مختلف موقعیتیابی و نحوه استفاده از آنها را توضیح میدهد.
معرفی موقعیتیابی position
موقعیتیابی به ما این امکان را میدهد که با نادیده گرفتن جریان عادی سند، نتایج جالبی ایجاد کنیم. اگر بخواهید موقعیت برخی از کادرها را از موقعیت پیشفرض جریانشان کمی تغییر دهید تا حس کمی عجیب و غریب و ناخوشایندی ایجاد کنید، چه؟ موقعیتیابی ابزار شماست. یا اگر بخواهید یک عنصر رابط کاربری ایجاد کنید که روی قسمتهای دیگر صفحه شناور باشد و/یا همیشه در یک مکان در داخل پنجره مرورگر قرار گیرد، صرف نظر از اینکه صفحه چقدر پیمایش میشود، چه؟ موقعیتیابی چنین طرحبندی را ممکن میسازد.
انواع مختلفی از موقعیتیابی وجود دارد که میتوانید روی عناصر HTML اعمال کنید. برای فعال کردن نوع خاصی از موقعیتیابی روی یک عنصر، از ویژگی موقعیتیابی استفاده میکنیم.
موقعیتیابی استاتیک static
موقعیتیابی استاتیک، پیشفرضی است که هر عنصر دریافت میکند. این فقط به این معنی است که «عنصر را در موقعیت پیشفرض خود در جریان عادی قرار دهید - چیز خاصی برای دیدن اینجا وجود ندارد.»
برای دیدن این (و تنظیم مثال خود برای بخشهای آینده) ابتدا کلاس positioned را به دوم در HTML اضافه کنید:
حالا قانون زیر را به انتهای CSS خود اضافه کنید:
اگر ذخیره و رفرش کنید، هیچ تفاوتی نخواهید دید، به جز رنگ پسزمینهی بهروز شدهی پاراگراف دوم. این مشکلی ندارد - همانطور که قبلاً گفتیم، موقعیتیابی استاتیک رفتار پیشفرض است!
موقعیتیابی نسبی relative
موقعیتیابی نسبی اولین نوع موقعیتی است که به آن نگاهی خواهیم انداخت. این بسیار شبیه به موقعیتیابی استاتیک است، با این تفاوت که وقتی عنصر موقعیتیابی شده در جریان عادی جای خود را پیدا کرد، میتوانید موقعیت نهایی آن را تغییر دهید، از جمله اینکه آن را طوری تنظیم کنید که با سایر عناصر صفحه همپوشانی داشته باشد. اعلان موقعیت را در کد خود بهروزرسانی کنید:
اگر در این مرحله ذخیره و رفرش کنید، اصلاً تغییری در نتیجه نخواهید دید. پس چگونه موقعیت عنصر را تغییر میدهید؟ باید از ویژگیهای بالا، پایین، چپ و راست استفاده کنید که در بخش بعدی توضیح خواهیم داد.
معرفی بالا، پایین، چپ و راست
بالا، پایین، چپ و راست در کنار موقعیت (position) برای مشخص کردن دقیق محل جابجایی عنصر موقعیتدهی شده استفاده میشوند. برای امتحان کردن این، اعلانهای زیر را به قانون در CSS خود اضافه کنید:
مقادیر این ویژگیها میتوانند هر واحدی را که منطقاً انتظار دارید، بگیرند: پیکسل، میلیمتر، rem، درصد و غیره.
عالیه، نه؟ خب، احتمالاً این چیزی نبود که انتظار داشتید. چرا اگر بالا و چپ را مشخص کردیم، به پایین و راست حرکت کرده است؟ این ممکن است خلاف منطق به نظر برسد. باید به آن طوری فکر کنید که انگار یک نیروی نامرئی وجود دارد که سمت مشخص شده جعبه موقعیتیابی شده را هل میدهد و آن را در جهت مخالف حرکت میدهد. بنابراین، برای مثال، اگر را مشخص کنید، انگار نیرویی بالای جعبه را هل میدهد و باعث میشود 30 پیکسل به سمت پایین حرکت کند.
موقعیتیابی مطلق absolute
بیایید سعی کنیم تعریف موقعیت را در کد شما به صورت زیر تغییر دهیم:
اول از همه، توجه داشته باشید که فاصلهای که عنصر موقعیتدهی شده باید در جریان سند باشد، دیگر وجود ندارد - عناصر اول و سوم به هم بسته شدهاند، انگار که دیگر وجود ندارند! خب، به نوعی، این درست است. یک عنصر با موقعیتدهی مطلق دیگر در جریان سند عادی وجود ندارد. در عوض، روی لایه خودش جدا از هر چیز دیگری قرار میگیرد. این بسیار مفید است: به این معنی است که میتوانیم ویژگیهای رابط کاربری مجزایی ایجاد کنیم که با طرحبندی سایر عناصر در صفحه تداخل نداشته باشند. به عنوان مثال، جعبههای اطلاعات پاپآپ، منوهای کنترل، پنلهای rollover، ویژگیهای رابط کاربری که میتوانند به هر جایی از صفحه کشیده و رها شوند و غیره.
دوم، توجه کنید که موقعیت عنصر تغییر کرده است. دلیل این امر این است که بالا، پایین، چپ و راست با موقعیتدهی مطلق به شیوهای متفاوت رفتار میکنند. به جای موقعیتدهی عنصر بر اساس موقعیت نسبی آن در جریان سند عادی، آنها فاصله عنصر را از هر یک از اضلاع عنصر حاوی آن مشخص میکنند. در این حالت، ما میگوییم که عنصر با موقعیت مطلق باید 30 پیکسل از بالای عنصر در برگیرنده (بلوک در برگیرنده اولیه، در این مورد، به زیر مراجعه کنید) و 30 پیکسل از سمت چپ فاصله داشته باشد.
در صورت نیاز میتوانید از بالا، پایین، چپ و راست برای تغییر اندازه عناصر استفاده کنید. سعی کنید - - - و را روی عناصر موقعیتیابی شده خود تنظیم کنید و ببینید چه اتفاقی میافتد! بعداً دوباره آن را برگردانید…
بله، مارجینها هنوز هم روی عناصر موقعیتیابی شده تأثیر میگذارند. با این حال، تداخل مارجین تأثیری ندارد.
کدام عنصر، «عنصر حاوی» یک عنصر با موقعیت مطلق است؟ این موضوع بسیار وابسته به مقدار ویژگی موقعیت اجداد عنصر موقعیت یافته است.
اگر هیچ عنصر اجدادی ویژگی موقعیت خود را به صراحت تعریف نکرده باشد، به طور پیشفرض همه عناصر اجداد موقعیت ثابتی خواهند داشت. نتیجه این است که عنصر با موقعیت مطلق در بلوک حاوی اولیه قرار میگیرد. بلوک حاوی اولیه دارای ابعاد viewport است و همچنین بلوکی است که عنصر را در بر میگیرد. به عبارت دیگر، عنصر با موقعیت مطلق در خارج از عنصر نمایش داده میشود و نسبت به viewport اولیه موقعیتدهی میشود.
عنصر موقعیتدهی شده در داخل در منبع HTML قرار دارد، اما در طرح نهایی، 30 پیکسل از لبههای بالا و چپ صفحه فاصله دارد. میتوانیم زمینه موقعیتدهی را تغییر دهیم، یعنی عنصر با موقعیت مطلق نسبت به کدام عنصر موقعیتدهی میشود. این کار با تنظیم موقعیتیابی روی یکی از اجداد عنصر انجام میشود: به یکی از عناصری که درون آن تودرتو شده است (شما نمیتوانید آن را نسبت به عنصری که درون آن تودرتو نشده است، موقعیتیابی کنید). برای مشاهده این، عبارت زیر را به قانون بدنه خود اضافه کنید:
عنصر موقعیتدهی شده اکنون نسبت به عنصر قرار میگیرد.
تمام این موقعیتیابی مطلق سرگرمکننده است، اما ویژگی دیگری هم وجود دارد که هنوز در نظر نگرفتهایم. وقتی عناصر شروع به همپوشانی میکنند، چه چیزی تعیین میکند که کدام عناصر روی بقیه و کدام عناصر زیر بقیه ظاهر شوند؟ در مثالی که تاکنون دیدهایم، ما فقط یک عنصر موقعیتیابی شده در زمینه موقعیتیابی داریم و این عنصر در بالا ظاهر میشود زیرا عناصر موقعیتیابی شده بر عناصر بدون موقعیتیابی غلبه میکنند. وقتی بیش از یک عنصر داریم چه؟
برای اینکه پاراگراف اول نیز موقعیتیابی مطلق داشته باشد، سعی کنید کد زیر را به CSS خود اضافه کنید:
در این مرحله، پاراگراف اول را به رنگ لیمویی میبینید که از جریان سند خارج شده و کمی بالاتر از جایی که در ابتدا بود، قرار گرفته است. همچنین در زیر پاراگراف اصلی قرار گرفته است، جایی که این دو با هم همپوشانی دارند. دلیل این امر این است که پاراگراف دومین پاراگراف در ترتیب منبع است و عناصری که در ترتیب منبع در موقعیتهای بعدی قرار گرفتهاند، بر عناصری که در ترتیب منبع در موقعیتهای قبلی قرار گرفتهاند، غلبه میکنند.
آیا میتوانید ترتیب قرارگیری را تغییر دهید؟ بله، میتوانید، با استفاده از ویژگی z-index. اشارهای به محور z است. ممکن است از نکات قبلی این دوره به یاد داشته باشید که در مورد صفحات وب با استفاده از مختصات افقی (محور x) و عمودی (محور y) برای تعیین موقعیت مواردی مانند تصاویر پسزمینه و جابجایی سایهها بحث کردیم. برای زبانهایی که از چپ به راست اجرا میشوند، (0,0) در سمت چپ بالای صفحه (یا عنصر) قرار دارد و محورهای x و y در سمت راست و پایین صفحه قرار دارند.
صفحات وب همچنین دارای یک محور z هستند: یک خط فرضی که از سطح صفحه نمایش شما به سمت صورت شما (یا هر چیز دیگری که دوست دارید جلوی صفحه نمایش باشد) امتداد دارد. مقادیر z-index بر محل قرارگیری عناصر موقعیتیابی شده روی آن محور تأثیر میگذارند؛ مقادیر مثبت آنها را به بالای پشته و مقادیر منفی آنها را به پایین پشته منتقل میکنند. به طور پیشفرض، عناصر موقعیتیابی شده همگی دارای z-index خودکار هستند که در واقع 0 است.
برای تغییر ترتیب قرارگیری، سعی کنید عبارت زیر را به قانون خود اضافه کنید:
توجه داشته باشید که z-index فقط مقادیر اندیس بدون واحد را میپذیرد؛ شما نمیتوانید مشخص کنید که میخواهید یک عنصر ۲۳ پیکسل بالاتر از محور Z باشد - اینطور کار نمیکند. مقادیر بالاتر بالاتر از مقادیر پایینتر قرار میگیرند و به شما بستگی دارد که از چه مقادیری استفاده کنید. استفاده از مقادیر ۲ یا ۳ همان تأثیر مقادیر ۳۰۰ یا ۴۰۰۰۰ را خواهد داشت.
حالا بیایید نگاهی به موقعیتیابی ثابت بیندازیم. این دقیقاً مانند موقعیتیابی مطلق عمل میکند، با یک تفاوت کلیدی: در حالی که موقعیتیابی مطلق، یک عنصر را نسبت به نزدیکترین جد موقعیتیابیشدهاش (بلوک حاوی اولیه در صورت عدم وجود) در جای خود ثابت میکند، موقعیتیابی ثابت، عنصر را نسبت به قسمت قابل مشاهدهی صفحه نمایش ثابت میکند. این بدان معناست که میتوانید آیتمهای رابط کاربری مفیدی ایجاد کنید که در جای خود ثابت هستند، مانند منوهای ناوبری پایدار که همیشه قابل مشاهده هستند، صرف نظر از میزان اسکرول صفحه.
بیایید یک مثال ساده برای نشان دادن منظورمان ارائه دهیم. اول از همه، قوانین و موجود را از CSS خود حذف کنید.
حالا قانون body را بهروزرسانی کنید تا عبارت را حذف کرده و یک ارتفاع ثابت اضافه کنید، مانند این:
حالا میخواهیم به عنصر موقعیت fixed بدهیم و آن را در بالای صفحه نمایش قرار دهیم. قانون زیر را به CSS خود اضافه کنید:
برای اینکه عنوان به بالای صفحه بچسبد، به نیاز داریم. ما به عنوان، عرضی برابر با ستون محتوا میدهیم و سپس یک پسزمینه سفید و مقداری padding و margin اضافه میکنیم تا محتوا در زیر آن قابل مشاهده نباشد.
اگر صفحه را ذخیره و رفرش کنید، یک جلوه کوچک و جالب از ثابت ماندن عنوان خواهید دید - به نظر میرسد که محتوا به بالا اسکرول میکند و در زیر آن ناپدید میشود. اما توجه کنید که چگونه برخی از محتوا در ابتدا زیر عنوان قرار میگیرند. دلیل این امر این است که عنوان موقعیتیابی شده دیگر در جریان سند ظاهر نمیشود، بنابراین بقیه محتوا به بالا منتقل میشوند. میتوانیم این را با کمی پایین آوردن پاراگرافها بهبود بخشیم. میتوانیم این کار را با تنظیم مقداری حاشیه بالا برای پاراگراف اول انجام دهیم. اکنون این را اضافه کنید:
موقعیتیابی چسبنده sticky
مقدار موقعیت دیگری به نام وجود دارد که تا حدودی جدیدتر از بقیه است. این اساساً ترکیبی از موقعیت نسبی و موقعیت ثابت است. این به یک عنصر موقعیتدهی شده اجازه میدهد تا زمانی که به یک آستانه خاص (مثلاً 10 پیکسل از بالای صفحه نمایش) اسکرول نشود، مانند یک موقعیت نسبی عمل کند و پس از آن ثابت میشود.
برای مثال، میتوان از موقعیتیابی چسبنده استفاده کرد تا یک نوار ناوبری تا یک نقطه خاص با صفحه اسکرول شود و سپس به بالای صفحه بچسبد.
یک کاربرد جالب و رایج از ایجاد یک صفحه فهرست پیمایشی است که در آن عناوین مختلف هنگام رسیدن به بالای صفحه به آن میچسبند. نشانهگذاری برای چنین مثالی میتواند به این شکل باشد:
کد CSS ممکن است به شکل زیر باشد. در حالت عادی، عناصر با محتوا اسکرول میشوند. وقتی خاصیت را به عنصر اضافه میکنیم، به همراه مقدار top برابر با 0، مرورگرهای پشتیبانیکننده، عنوانها را با رسیدن به آن موقعیت به بالای صفحه نمایش میچسبانند. سپس هر عنوان بعدی با اسکرول به سمت بالا، جایگزین عنوان قبلی میشود.
عناصر چسبنده نسبت به نزدیکترین جد با "مکانیسم اسکرول" "چسبنده" هستند، که توسط خاصیت سرریز اجدادشان تعیین میشود.
