position تتحكم في كيفية وضع العنصر وما إذا كانت خصائص الإزاحة (top/right/bottom/left) تنطبق عليه.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute يضع العنصر نسبة إلى أقرب سلف له موضع محدد (أي شيء بخلاف static). لذا تقوم بتعيين position: relative على العنصر الأب لجعله نقطة مرجعية:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
نمط relative-parent / absolute-child موجود في كل مكان: badges وdropdowns وtooltips وأزرار الإغلاق.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0)، ثم تبقى هناك بينما حاويتها في الرؤية — رائعة لرؤوس الأقسام.عناصر absolute/fixed تُزال من التدفق العادي، لذا لا تحتفظ بمساحة — العناصر الأخرى تتصرف كما لو أنها غير موجودة، مما قد يسبب تداخلاً. خطط لذلك (مثلاً أضف padding لتعويض navbar ثابتة).
position ضرورية للـ overlays والsticky headers والmodals والdropdowns والbadges.
علاقة relative-parent/absolute-child والتمييز بين fixed و sticky هي الجوهر العملي الذي تستخدمه باستمرار.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع