CSS Layout – The position Property – سایت اموزشی زرین لرن

توضیح درباره خاصیت position در CSS :

—

CSS Layout — خاصیت position

خاصیت position تعیین می‌کند که یک عنصر چگونه در صفحه قرار بگیرد و نسبت به چه چیزی موقعیتش تنظیم شود.

—

مقادیر رایج position:

1. static

* مقدار پیش‌فرض همه عناصر.
* عنصر در جریان طبیعی صفحه قرار دارد و هیچ موقعیت خاصی ندارد.
* ویژگی‌های `top`, `left`, `right`, `bottom` روی این مقدار کار نمی‌کنند.

2. relative

* عنصر در جریان طبیعی صفحه قرار دارد اما می‌توان با استفاده از `top`, `left`, `right`, `bottom` آن را نسبت به موقعیت طبیعی خودش جابجا کرد.
* فضای عنصر در صفحه حفظ می‌شود (یعنی جابجایی فقط ظاهر را تغییر می‌دهد، محل اصلی عنصر در صفحه همچنان اشغال می‌شود).

3. absolute

* عنصر نسبت به نزدیک‌ترین عنصر والد که موقعیت آن غیر از `static` است، موقعیت‌دهی می‌شود.
* از جریان طبیعی صفحه خارج می‌شود (یعنی جایی در صفحه اشغال نمی‌کند و می‌تواند روی عناصر دیگر قرار بگیرد).
* برای موقعیت‌دهی دقیق به عناصر استفاده می‌شود.

4. fixed

* عنصر نسبت به پنجره مرورگر (viewport) موقعیت‌دهی می‌شود.
* هنگام اسکرول صفحه، عنصر در جای خودش ثابت می‌ماند.
* مانند `absolute` از جریان صفحه خارج است.

5. sticky

* ترکیبی از `relative` و `fixed`.
* تا زمانی که اسکرول به یک مقدار مشخص نرسیده، رفتار `relative` دارد.
* بعد از رسیدن به آن نقطه، مانند `fixed` در جای خودش ثابت می‌شود.

—

ویژگی‌های مرتبط با position:

* `top`: فاصله از بالا
* `right`: فاصله از راست
* `bottom`: فاصله از پایین
* `left`: فاصله از چپ

این ویژگی‌ها فقط وقتی اعمال می‌شوند که `position` مقدار غیر از `static` داشته باشد.

—

مثال:

css
.box {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
height: 150px;
background-color: lightblue;
}