ما هي خاصية position؟
تُستخدم خاصية position لتحديد طريقة تموضع العنصر في الصفحة بالنسبة إلى الصفحة نفسها أو إلى عناصر أخرى.
القيم الأساسية لـ position:
| القيمة | الوصف |
|---|---|
static |
الوضع الافتراضي – العنصر يتموضع بشكل طبيعي وفق تدفق الصفحة |
relative |
يتموضع بالنسبة إلى مكانه الأصلي |
absolute |
يتموضع بالنسبة لأقرب عنصر أب له position غير static |
fixed |
يتموضع بالنسبة إلى نافذة العرض (ويبقى ثابتًا عند التمرير) |
sticky |
يبقى ثابتًا في الأعلى عند التمرير حتى يصل إلى نقطة معينة |
مثال عملي على كل نوع:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #d1e7dd;
margin-bottom: 20px;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: #f8d7da;
}
.absolute-container {
position: relative;
height: 150px;
background-color: #cfe2ff;
}
.absolute {
position: absolute;
top: 10px;
right: 10px;
background-color: #ffeeba;
padding: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
background-color: #f5c6cb;
padding: 10px;
width: 100%;
}
.sticky {
position: sticky;
top: 0;
background-color: #d4edda;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed">عنصر Fixed (ثابت في الأعلى)</div>
<div style="height: 60px;"></div> <!-- مسافة لتجربة fixed -->
<div class="box">Static Box (افتراضي)</div>
<div class="box relative">Relative Box (تحرك قليلاً من مكانه)</div>
<div class="absolute-container">
Container يحتوي على عنصر Absolute
<div class="absolute">Absolute Box</div>
</div>
<div style="height: 500px;">
<div class="sticky">Sticky Box (يلتصق عند التمرير)</div>
<p>مرر للأسفل لرؤية تأثير sticky.</p>
</div>
</body>
</html>
ملاحظات مهمة:
- عند استخدام
absoluteيجب أن يكون العنصر الأب position: relative ليتم التموضع داخله. fixedمفيد للـ headers الثابتة أو الأزرار الطافية.stickyيجمع بينrelativeوfixed: يبدأ عادي ثم يثبت عند التمرير.
الواجب العملي:
- أنشئ عدة عناصر باستخدام
position: relativeوabsoluteوجرّب التحكم فيtop,left. - اصنع شريط علوي ثابت باستخدام
position: fixed. - جرّب
stickyمع عنصر داخل مقالة طويلة.