موقعیت دهی (Position)
«موقعیت دهی (Position)» یعنی کنترل جای عناصر در صفحه. به طور عادی، عناصر در «جریان عادی (Normal Flow)» می آیند. اما با position می توانیم این جریان را کم یا زیاد تغییر دهیم؛ مثل جابجایی نیمکت ها در کلاس.
انواع موقعیت دهی در CSS
ویژگی position پنج حالت دارد: static، relative، fixed، absolute و sticky. سپس با top، right، bottom و left جای دقیق را تعیین می کنیم.
position: static
حالت پیش فرض است. ویژگی های top و left و ... اثر ندارند. عنصر همان جا می ماند.
<style>
.static {
position: static;
border: 3px solid #73AD21;
}
</style>
<div class="static">static؛ کاملاً در جریان عادی</div>
position: relative
عنصر نسبت به جای معمولش جابجا می شود. بقیه محتوا جابجا نمی شود.
<style>
.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
<div class="relative">relative؛ 30px به راست رفته</div>
position: fixed
عنصر به «پنجره مرورگر (Viewport)» می چسبد. با اسکرول تکان نمی خورد.
<style>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
<div class="fixed">fixed؛ همیشه گوشه صفحه</div>
position: absolute
عنصر نسبت به نزدیک ترین والد دارای position غیر static تنظیم می شود. از جریان عادی خارج می شود.
<style>
.wrap {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
.abs {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
</style>
<div class="wrap">
والد relative
<div class="abs">absolute داخل والد</div>
</div>
position: sticky
ابتدا مثل relative است. با رسیدن به آستانه اسکرول، می چسبد مثل fixed. حتماً یکی از top/right/bottom/left را بده.
<style>
.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
</style>
<div class="sticky">سرتیتر چسبان</div>
قرار دادن متن روی تصویر
والد را relative بگذار. سپس متن را absolute کن. با top و left جای دقیق بده.
<style>
.img-box {
position: relative;
text-align: center;
}
.label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
}
</style>
<div class="img-box">
<img src="image.jpg" alt="نمونه">
<div class="label">متن وسط تصویر</div>
</div>
گام های عملی موقعیت دهی
- یک div بساز و position بده.
- با top و left آن را جابجا کن.
- اسکرول کن و تفاوت ها را بررسی کن.
نکته: برای رفتارهای نمایشی، صفحه نمایش (Display) را ببین. همچنین برای کنترل پهنا در طرح واکنش گرا، از حداکثر عرض کمک بگیر.
جمع بندی سریع
- static پیش فرض است و جابجا نمی شود.
- relative نسبت به جای خودش می پرد.
- fixed به پنجره می چسبد.
- absolute داخل والد موقعیت دار تنظیم می شود.
- sticky بعد از آستانه می چسبد.