**top / right / bottom / left:** تُحدد إزاحة العنصر الموضّع من الحواف المقابلة. تعمل فقط مع position: relative/absolute/fixed/sticky.
**inset:** اختصار حديث لـ top + right + bottom + left: `inset: 0` = `top: 0; right: 0; bottom: 0; left: 0` `inset: 10px 20px` = أعلى/أسفل 10px، يسار/يمين 20px
**z-index:** يتحكم في ترتيب الطبقات Z (من الأمام للخلف). قيمة أعلى = أمام. - يعمل فقط على العناصر الموضّعة (position != static) والـ flex/grid items. - يُنشئ stacking context إذا كانت قيمته رقماً.
**Stacking Context:** كل عنصر يُنشئ stacking context (مثل الموضّع بـ z-index مُحدَّد، أو الـ flex item) يكون له نطاق z-index خاص به.
| 1 | /* تغطية كاملة */ |
| 2 | .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } |
| 3 | |
| 4 | /* طبقات z-index منظمة */ |
| 5 | :root { |
| 6 | --z-dropdown: 100; |
| 7 | --z-sticky: 200; |
| 8 | --z-overlay: 300; |
| 9 | --z-modal: 400; |
| 10 | --z-tooltip: 500; |
| 11 | } |
مثال 1: نظام Z-Index منظم
| 1 | /* تعريف قيم z-index كمتغيرات */ |
| 2 | :root { |
| 3 | --z-base: 0; |
| 4 | --z-raised: 10; |
| 5 | --z-dropdown: 100; |
| 6 | --z-sticky: 200; |
| 7 | --z-overlay: 300; |
| 8 | --z-modal: 400; |
| 9 | --z-toast: 500; |
| 10 | } |
| 11 | |
| 12 | .card { position: relative; z-index: var(--z-raised); } |
| 13 | .dropdown { position: absolute; z-index: var(--z-dropdown); } |
| 14 | .navbar { position: sticky; top: 0; z-index: var(--z-sticky); } |
| 15 | .modal-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); } |
| 16 | .modal { position: fixed; z-index: var(--z-modal); } |