Lesson 30 / الدرس 30
position & z-index / خاصيتا position و z-index
static, relative, absolute, fixed and sticky — what each one positions an element against, and how z-index decides which one sits on top when they overlap.
static و relative و absolute و fixed و sticky — بالنسبة لماذا يتموضع كل عنصر، وكيف تقرر z-index أيها يجلس فوق الآخر عند التداخل.
By default every element sits exactly where the normal flow puts it, the same flow you have used since the display lesson. The position property lets you pull an element out of that flow and place it deliberately, using four offset properties — top, right, bottom and left — that only start working once you give position a value other than the default. There are five values to know: static, relative, absolute, fixed and sticky.
display. وخاصية position تتيح لك سحب عنصر من ذلك التدفق ووضعه بنفسك، باستخدام أربع خصائص إزاحة — top و right و bottom و left — لا تبدأ بالعمل إلا بعد أن تعطي position قيمة غير الافتراضية. وهناك خمس قيم يجب أن تعرفها: static و relative و absolute و fixed و sticky.
static and relative: the default, and a small nudge
static و relative: الافتراضية، ودفعة بسيطة
static is the default value every element already has — top, right, bottom and left are simply ignored on it. relative is the smallest step away from that: the element still takes its normal spot in the flow, reserving exactly the same space it always would, and the offsets then nudge it visually from that spot — without ever affecting where its neighbors sit.
static هي القيمة الافتراضية التي يملكها كل عنصر أصلًا — وتتجاهل معها top و right و bottom و left ببساطة. أما relative فهي أصغر خطوة عن ذلك: يبقى العنصر في مكانه الطبيعي داخل التدفق، ويحجز نفس المساحة التي كان سيحجزها دائمًا، ثم تدفعه خصائص الإزاحة بصريًا من ذلك المكان — دون أن تؤثر أبدًا في مكان جيرانه..box2 {
position: relative;
top: 20px;
left: 20px;
}position: relative, but its original spot stays reserved — exactly like visibility: hidden from the last lesson, nothing else moves to fill the gap.
position: relative، لكن مكانه الأصلي يبقى محجوزًا — تمامًا مثل visibility: hidden في الدرس السابق، فلا شيء آخر يتحرك ليملأ الفجوة.
absolute: positioned against an ancestor
absolute: يتموضع بالنسبة إلى عنصر أب
position: absolute is a bigger step: the element leaves the normal flow completely, the same way display: none does — its neighbors close the gap it would have left, as if it was never there. It is then positioned using top, right, bottom and left against its nearest ancestor that has a position other than static — usually one you deliberately set to relative for exactly this reason. If no ancestor qualifies, it positions against the page itself.
position: absolute خطوة أكبر: يغادر العنصر التدفق العادي تمامًا، تمامًا مثلما تفعل display: none — فتُغلق العناصر المجاورة الفجوة التي كان سيتركها، كأنه لم يكن موجودًا أصلًا. ثم يتموضع باستخدام top و right و bottom و left بالنسبة إلى أقرب عنصر أب له position غير static — وغالبًا تضبطها أنت عمدًا على relative لهذا السبب بالتحديد. وإن لم يوجد أب مؤهل، يتموضع بالنسبة إلى الصفحة نفسها..card {
position: relative;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}position: relative so it becomes the reference point, and the badge gets position: absolute with top and right to sit exactly in its corner. Be deliberate about which corner: left and right are physical offsets and do not follow the page direction the way text-align: start does. This badge stays in the top-right corner on a dir="rtl" page too — which is the far corner from where an Arabic reader starts reading, and probably not what you wanted.
position: relative لتصبح نقطة المرجع، وتأخذ الشارة position: absolute مع top و right لتجلس بالضبط في زاويتها. وانتبه لأي زاوية تختار: فـ left و right إزاحتان فيزيائيتان لا تتبعان اتجاه الصفحة كما تفعل text-align: start. فهذه الشارة تبقى في الزاوية العلوية اليمنى في صفحة dir="rtl" أيضًا — وهي الزاوية الأبعد عن حيث يبدأ القارئ العربي القراءة، وغالبًا ليست ما أردت.position: relative على العنصر الأب المقصود هو الخطأ الأشيع مع position: absolute. فبدونها، يستمر المتصفح في البحث للأعلى عن أب له position، وغالبًا لا يجد أحدًا، فيتموضع العنصر بالنسبة إلى الصفحة كلها ويقفز إلى زاوية بعيدة تمامًا عمّا توقعته.
fixed and sticky: pinned to the viewport, or almost
fixed و sticky: مثبّتة بالنسبة إلى نافذة العرض، أو تقريبًا.header {
position: sticky;
top: 0;
}position: fixed pins an element to the browser's viewport, ignoring scrolling entirely — a back-to-top button or a fixed header. position: sticky is the hybrid: it behaves like relative until the page scrolls to the point given by top, then it locks in place like fixed, but only inside its own parent. Scroll inside the box below and watch the heading stick to the top the moment it reaches it.
position: fixed تثبّت العنصر بالنسبة إلى نافذة عرض المتصفح، متجاهلة التمرير تمامًا — زر "عودة للأعلى" أو رأس صفحة ثابت. أما position: sticky فهي مزيج بينهما: تتصرف مثل relative حتى يصل التمرير إلى النقطة التي يحددها top، ثم تثبت في مكانها مثل fixed، لكن داخل والدها فقط. مرّر داخل الصندوق أدناه وشاهد العنوان يلتصق بالأعلى بمجرد وصوله إليه.
z-index: deciding who sits on top
z-index: من يجلس فوق من.front {
position: absolute;
z-index: 2;
}z-index decides which one draws on top — a higher number wins. It only has an effect on an element whose position is something other than static. Swap the two numbers below and watch the stacking order flip.
z-index أيها يُرسم فوق الآخر — الرقم الأكبر يفوز. ولا تأثير لها إلا على عنصر لخاصية position فيه قيمة غير static. بدّل الرقمين أدناه وشاهد ترتيب التراكب ينقلب.Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. An element has position: relative but no top, right, bottom or left set. Where does it appear?
relative changes nothing by itself — it only unlocks the offset properties for later use. With no offsets set, the element sits exactly where static would have put it.
relative شيئًا بمفردها — فهي فقط تفتح خصائص الإزاحة لاستخدامها لاحقًا. وبلا أي إزاحة محددة، يجلس العنصر بالضبط حيث كانت ستضعه static.2. What does position: absolute position an element against?
It walks up looking for the nearest ancestor whose position is not static. That is why a parent is so often given position: relative on purpose.
position فيه قيمة غير static. ولهذا غالبًا ما يُعطى الأب position: relative عن قصد.3. Two positioned boxes overlap. One has z-index: 1 and the other has z-index: 5. Which one is drawn on top?
A higher z-index wins and draws above a lower one. It only has an effect on elements whose position is not static.
z-index يفوز ويُرسم فوق الرقم الأصغر. ولا تأثير له إلا على عناصر لخاصية position فيها قيمة غير static.Score / النتيجة: 0 / 3
Your task / مهمتك
Build a small profile card: give the card position: relative, then pin a status badge to its top-right corner with position: absolute, top and right.
ابنِ بطاقة تعريف صغيرة: أعطِ البطاقة position: relative، ثم ثبّت شارة حالة في زاويتها العلوية اليمنى باستخدام position: absolute و top و right.
-
The card has
position: relativeالبطاقة تملكposition: relative -
The badge has
position: absolutewithtopandrightset الشارة تملكposition: absoluteمع تحديدtopوright - The badge sits inside the card's corner, not the far corner of the page الشارة تجلس داخل زاوية البطاقة، لا في زاوية الصفحة البعيدة