46. مخطط التموضع: Absolute (خارج التدفق)
position: absolute يزيل العنصر تماماً من تدفق المستند الطبيعي. تنهار المساحة التي كان يشغلها، وتتصرف العناصر الأخرى كما لو لم يكن موجوداً أبداً.
كيف يعمل التموضع المطلق
- النقطة المرجعية: يبحث العنصر ذو التموضع المطلق عن أقرب سلف (أب، جد، إلخ) لديه تموضع غير ثابت (
relativeأوabsoluteأوfixedأوsticky). هذا السلف هو نقطته المرجعية. - لا توجد نقطة مرجعية: إذا لم يوجد مثل هذا السلف، يستخدم العنصر كتلة الاحتواء الأولية (عنصر
<html>أو<body>) كنقطة مرجعية له. - الإزاحة: تُستخدم بعد ذلك خصائص
topوrightوbottomوleftلوضع العنصر بالنسبة لتلك النقطة المرجعية.
css /* هيكل HTML: / /
/
/
*/
...
/
/ .parent-relative { position: relative; /* ضبط السياق */ width: 300px; height: 200px; border: 2px solid black; }
.child-absolute { position: absolute; top: 0; right: 0; /* يضع الطفل في الزاوية العلوية اليمنى للأب */ width: 50px; height: 50px; background-color: red; }
حالات الاستخدام الشائعة: القوائم المنسدلة، تلميحات الأدوات (tooltips)، تموضع النوافذ المنبثقة (modals)، الشارات، والتراكبات (overlays).