45. مخطط التموضع: Relative (الإزاحة)

position: relative هو انحراف طفيف عن التدفق الطبيعي. يظل العنصر في مكانه في تدفق المستند، ولكن يمكنك استخدام خصائص الإزاحة (top, right, bottom, left) لتحريكه بالنسبة لموقعه الأصلي.

كيف يعمل التموضع النسبي

1. يحجز العنصر مساحته الأصلية في التخطيط (كأنه 'شبح').
2. يتم بعد ذلك إزاحة العنصر بصرياً باستخدام top/bottom/left/right بالنسبة إلى تلك النقطة الأصلية.
3. هام: العناصر الأخرى في الصفحة لا تشعر بالإزاحة؛ فهي تتصرف كما لو كان العنصر لا يزال في موقعه الأصلي.

css .shifted-box { position: relative; /* يزيح الصندوق 20 بكسل للأسفل من حافته العلوية الأصلية / top: 20px; / يزيح الصندوق 10 بكسل لليمين من حافته اليسرى الأصلية */ left: 10px; background-color: orange; }

حالة الاستخدام الأساسية: إنشاء سياق تموضع

الاستخدام الأكثر أهمية لـ position: relative ليس لتحريك العنصر، بل لإنشاء سياق تموضع لأطفاله. يعمل الأب الذي له تموضع نسبي كنقطة مرجعية لأي أطفال لهم تموضع مطلق (absolute) بداخله (الدرس 46).