خاصية `position` تُحدد كيفية تموضع العنصر في الصفحة:
**static (الافتراضي):** يتدفق بشكل طبيعي. خصائص top/right/bottom/left لا تؤثر.
**relative:** يتحرك نسبةً لموقعه الطبيعي. يبقى في التدفق (مساحته محجوزة). يُنشئ **Containing Block** لأبناء absolute.
**absolute:** يُزال من التدفق. يتموضع نسبةً لأقرب جد موضّع (له position غير static). إذا لم يجد، يُوضع نسبةً لـ initial containing block.
**fixed:** يُزال من التدفق. يتموضع نسبةً لنافذة المتصفح. يظل ثابتاً عند التمرير.
**sticky:** يتصرف كـ relative حتى يصل لنقطة معينة عند التمرير، ثم يتحول لـ fixed. يحتاج تحديد top/left/right/bottom.
| 1 | /* توسيط بـ absolute */ |
| 2 | .parent { position: relative; } |
| 3 | .child { |
| 4 | position: absolute; |
| 5 | top: 50%; left: 50%; |
| 6 | transform: translate(-50%, -50%); |
| 7 | } |
| 8 | |
| 9 | /* شريط تنقل ثابت */ |
| 10 | .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; } |
| 11 | |
| 12 | /* رأس جدول ثابت */ |
| 13 | .sticky-header { position: sticky; top: 0; background: white; } |
مثال 1: بطاقة مع شارة Absolute
| 1 | .card { |
| 2 | position: relative; |
| 3 | border-radius: 12px; |
| 4 | overflow: hidden; |
| 5 | } |
| 6 | |
| 7 | /* شارة في زاوية البطاقة */ |
| 8 | .card .badge { |
| 9 | position: absolute; |
| 10 | top: 12px; |
| 11 | inset-inline-end: 12px; /* right في LTR, left في RTL */ |
| 12 | background: #ef4444; |
| 13 | color: white; |
| 14 | padding: 4px 10px; |
| 15 | border-radius: 999px; |
| 16 | font-size: 0.75rem; |
| 17 | font-weight: 700; |
| 18 | } |
| 19 | |
| 20 | /* overlay عند hover */ |
| 21 | .card .overlay { |
| 22 | position: absolute; |
| 23 | inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */ |
| 24 | background: rgba(0,0,0,0.4); |
| 25 | opacity: 0; |
| 26 | transition: opacity 0.2s; |
| 27 | } |
| 28 | .card:hover .overlay { opacity: 1; } |