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

تتحكم الخاصية position في كيفية وضع العنصر ضمن تدفق المستند. والقيم الخمس هي: static وrelative وabsolute وfixed وsticky.

تكون القيمة الافتراضية لكل عنصر هي position: static. وتتبع العناصر ذات التموضع static التدفق الطبيعي للمستند؛ إذ تتراص العناصر الكتلية عموديًا، وتتدفق العناصر المضمّنة من اليسار إلى اليمين. ولا يكون لخصائص الإزاحة (top وright وbottom وleft) أي تأثير.

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

عند استخدام position: relative مع الإزاحات، يتحرك العنصر بصريًا، لكن مساحته الأصلية في التخطيط تظل محجوزة. ولا تملأ العناصر الأخرى الفراغ الناتج.

تنقل خصائص الإزاحة العنصر انطلاقًا من نقطةه المرجعية:

• top: ينقله إلى الأسفل من الحافة العلوية
• left: ينقله إلى اليمين من الحافة اليسرى
• تعكس القيم السالبة الاتجاه

لا تعمل z-index إلا على العناصر ذات التموضع (وليس static). إذا احتجتم إلى التحكم في ترتيب الطبقات، فاضبطوا position: relative على الأقل.

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

يؤدي الجمع بين position: relative وtransform إلى إنشاء سياق تكديس جديد. ويظل العنصر ضمن التدفق، لكن يمكن تحويله بصريًا.

تجنبوا ضبط position: relative على كل عنصر. فهذا ينشئ سياقات تكديس قد تعقد إدارة z-index. استخدموه فقط عند الحاجة إلى الإزاحات أو إلى تثبيت العناصر الأبناء ذات التموضع المطلق.

لأن التموضع النسبي لا يؤثر في تدفق التخطيط، يمكنكم تحريك top/left بأمان لإضافة تأثيرات بصرية، مع أن تحريك transform: translate() أكثر كفاءة.

في DevTools، راجعوا لوحة Computed لمعرفة قيمة position الفعلية. ويوضح مخطط نموذج الصندوق إحداثيات الإزاحة المطبقة بدقة.

ماذا يحدث لمساحة التخطيط الخاصة بالعنصر عند تطبيق position: relative; top: 20px؟

إن position: static هي القيمة الافتراضية؛ فلا إزاحات ولا تكديس. تتيح position: relative إزاحة العنصر انطلاقًا من موضعه نفسه، مع الحفاظ على مساحة التخطيط الخاصة به. ويتمثل دورها الأهم في العمل ككتلة احتواء للعناصر الأبناء ذات التموضع المطلق.