شناسایی پایه‌های موقعیت دهی در CSS
حتماً تا حالا شنیدی که نحوه قرارگیری عناصر در صفحه وب خیلی مهمه. خب این کار توسط ویژگیِ position در CSS انجام می‌شه. این ویژگی به ما اجازه می‌ده تا نحوه قرارگیری المان‌ها رو توی صفحه به دلخواه خودمون کنترل کنیم.
چهار نوع اصلی موقعیت‌دهی توی CSS داریم که شامل static، relative، absolute و fixed می‌شن. تو این مقاله، با هم این ویژگی‌ها رو بررسی می‌کنیم.
چگونه موقعیت‌ها کار می‌کنند
وقتی که شما یه عنصر رو با static تعریف می‌کنید، اون عنصر بر اساس جریانی طبیعی توی صفحه قرار می‌گیره، و موقعیت‌دهی خاصی نداره. حالا اگه از relative استفاده کنید، عنصر رو نسبت به موقعیت فعلی خودش جا به‌جا می‌کنید.
این به این معنیه که مکان اصلی عنصر همچنان توی صفحه حفظ می‌شه، اما می‌تونید با استفاده از ویژگی‌های top, right, bottom و left جابجاییش کنید.
کار با موقعیت‌های مطلق و ثابت
ویژگی absolute یه مرحله فراتر می‌ره و اجازه می‌ده عنصر رو نسبت به اولین عنصر مافوق به صورت کامل جابجا کنید، دقیقاً بر اساس نیازمندی‌هایی که دارید جایگزین کنید. تو این نوع موقعیت‌دهی، عنصر می‌تونه خارج از جریان طبیعی صفحه حرکت کنه.
از طرف دیگه، ویژگی fixed عنصر رو توی یک موقعیت ثابت در صفحه قرار می‌ده، به این معنی که حتی وقتی صفحه رو به بالا و پایین اسکرول می‌کنید، عنصر همچنان توی جای خودش ثابت باقی می‌مونه.
بهترین راهکارها و تکنیک‌های عملی
استفاده از موقعیت‌دهی توی CSS کمک زیادی به طراحی‌های پیچیده و زیبا می‌کنه. مثلاً می‌تونید از position: fixed; برای ایجاد نوار ناوبری ثابت استفاده کنید که همیشه در بالای صفحه باقی بمونه. یا از position: absolute; برای قرار دادن عکس در گوشه‌ای از صفحه استفاده کنید که مستقل از عناصر دیگر قرار بگیره.
یه تکنیک دیگه که خیلی جاها استفاده می‌شه، ترکیب position: relative; و position: absolute; برای کنترل بهتر بر روی موقعیت دادن عناصر داخل یک موقعیت‌دهنده خاص در صفحه است.
نمونه کد
<!DOCTYPE html>
<html>
<head>
<style>
.relative-box {
position: relative;
width: 300px;
height: 200px;
background-color: lightblue;
}
.absolute-element {
position: absolute;
top: 20px;
right: 20px;
background-color: coral;
padding: 10px;
}
.fixed-header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed-header">
Fixed Header
</div>
<div class="relative-box">
This is a relative box.
<div class="absolute-element">Absolutely Positioned</div>
</div>
</body>
</html>
توضیح کد
<!DOCTYPE html>
این اعلامیه نوع سند HTML را مشخص می‌کند.
<style>
در این قسمت، استایل‌های CSS که قصد داریم روی صفحه اعمال کنیم رو تعیین می‌کنیم.
.relative-box
این کلاس یه باکس با موقعیت relative ایجاد می‌کنه و رنگ پس‌زمینه روشن تعیین می‌کنه.
.absolute-element
این عنصر به صورت absolute داخل relative-box قرار می‌گیره و با شاخص‌های top و right می‌شه جابجاش کرد.
.fixed-header
این استایل یک نوار سربرگ ثابت در بالای صفحه ایجاد می‌کنه که همراه با اسکرول صفحه حرکت نمی‌کنه.
توضیحات دیگر کد نشان‌دهنده پیاده‌سازی همین استایل‌ها بر روی عناصر HTML هستند.