ما الهدف من position؟
تُستخدم خاصية position لتحديد مكان العنصر بدقة داخل الصفحة أو داخل عنصر آخر، مع التحكم في حركته باستخدام خصائص مثل top، right، bottom، و left.
1. static (الوضع الافتراضي)
- العناصر تتبع التدفق الطبيعي في الصفحة.
- لا تتأثر بخصائص
topأوleft...
div {
position: static;
}
2. relative (تموضع نسبي)
- يتم تحريك العنصر نسبيًا لمكانه الأصلي.
- لا يؤثر على مكان العناصر الأخرى.
.box {
position: relative;
top: 10px;
left: 20px;
}
3. absolute (تموضع مطلق)
- يتم تحريك العنصر بالنسبة لأقرب عنصر أب له يملك
position: relativeأوabsolute، وإن لم يوجد فيُحسب منbody.
.box {
position: absolute;
top: 30px;
right: 10px;
}
4. fixed (تموضع ثابت)
- يتم تحديد مكان العنصر بالنسبة لنافذة المتصفح، ولا يتحرك عند التمرير.
.header {
position: fixed;
top: 0;
width: 100%;
}
5. sticky (تموضع لاصق)
- مزيج من
relativeوfixed. - يبقى في مكانه حتى يصل لموضع معين، ثم يثبت أثناء التمرير.
.menu {
position: sticky;
top: 0;
}
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
background: #f2f2f2;
margin-bottom: 100px;
}
.box1 {
position: relative;
background: #4CAF50;
color: white;
padding: 20px;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
background: #2196F3;
color: white;
padding: 20px;
}
.box3 {
position: fixed;
bottom: 10px;
right: 10px;
background: #f44336;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">Box 1 (Relative)</div>
<div class="box2">Box 2 (Absolute)</div>
</div>
<div style="height: 800px;">
مرر للأسفل لتلاحظ العنصر الثابت (Fixed)
</div>
<div class="box3">Box 3 (Fixed)</div>
</body>
</html>
نصائح:
- دائمًا عند استخدام
absoluteضع العنصر داخلrelativeلضبط مكانه بشكل دقيق. - استخدم
fixedلعناصر مثل أزرار الدعم أو الهيدر الثابت. - استخدم
stickyلقوائم تظهر مع التمرير.
الواجب العملي:
- أنشئ صفحة فيها 3 عناصر بمواقع مختلفة باستخدام
relative،absolute، وfixed. - جرّب التنقل بينهم ولاحظ الفرق العملي.