التموضع المطلق وContaining Block

يُزال العنصر ذو التموضع المطلق من التدفق الطبيعي للمستند. وتتصرف العناصر الأخرى كما لو أنه غير موجود. ويُوضَع العنصر بالنسبة إلى أقرب سلف له ذي تموضع.

تكون كتلة الاحتواء للعنصر ذي التموضع المطلق أقرب سلف له يمتلك قيمة position غير static. وإذا لم يوجد مثل هذا السلف، يُوضَع العنصر بالنسبة إلى كتلة الاحتواء الأولية (أي إطار العرض).

النمط الأكثر شيوعًا هو إضافة position: relative إلى العنصر الأب لاحتواء العناصر الأبناء ذات التموضع المطلق.

مع التموضع المطلق، تُقاس top/right/bottom/left انطلاقًا من حافة المسافة الداخلية لكتلة الاحتواء.

التقنية التقليدية لتوسيط العناصر ذات التموضع المطلق:

تتقلص العناصر ذات التموضع المطلق افتراضيًا لتلائم محتواها (shrink-wrap)، ما لم يُحدَّد لها عرض أو ارتفاع. ولم تعد تتمدد لملء العرض الكامل لحاويتها مثل العناصر الكتلية.

يؤدي ضبط الحواف الأربع على 0 إلى تمديد العنصر ذي التموضع المطلق لملء كتلة الاحتواء الخاصة به:

الخاصية inset هي صيغة مختصرة للخصائص top وright وbottom وleft مجتمعة:

تشارك العناصر ذات التموضع المطلق في سياقات التكديس. استخدموا z-index للتحكم في أي العناصر المطلقة المتداخلة يظهر في المقدمة.

إذا نسيتم إضافة position: relative إلى العنصر الأب، فسيُوضَع العنصر الابن المطلق بالنسبة إلى أقرب سلف ذي تموضع، وغالبًا ما يكون إطار العرض. تحققوا دائمًا من كتلة الاحتواء.

لا تكون حاوية flex أو grid تلقائيًا عنصرًا ذا تموضع. ولا يزال يتعين عليكم إضافة position: relative صراحةً لجعلها كتلة احتواء للعناصر الأبناء المطلقة.

أين يُوضَع العنصر ذو التموضع المطلق إذا لم يمتلك أي من أسلافه قيمة position غير static؟

تغادر العناصر ذات التموضع المطلق تدفق المستند، وتُوضَع بالنسبة إلى أقرب سلف غير static لها. أضيفوا دائمًا position: relative إلى العنصر الأب للتحكم في الموضع. استخدموا inset: 0 لتمديد العنصر المطلق وملء حاويته.