CSS - Positioning تمركز العناصر
CSS - تموضع العناصر (position)
🔸 تُستخدم خاصية position في CSS للتحكم في مكان ظهور العناصر داخل الصفحة. يمكن استخدامها مع خصائص إضافية مثل top وright وbottom وleft لتحريك العنصر داخل المستند.
🔹 القيم المتاحة لـ position
- static (افتراضية): العنصر يتموضع حسب تدفق الصفحة العادي.
- relative: العنصر يتم تحريكه من موقعه الأصلي دون خروجه من السياق.
- absolute: العنصر يتم تموضعه نسبةً لأقرب عنصر أب غير static.
- fixed: العنصر يتموضع نسبةً إلى نافذة المتصفح ويبقى في مكانه حتى عند التمرير.
- sticky: العنصر يبدأ كـ relative ويتحول إلى fixed عند الوصول إلى موضع معين أثناء التمرير.
🧪 مثال على position: static (الوضع الافتراضي)
div {
position: static;
}
📌 لا يمكن استخدام الخصائص top / left / right / bottom مع static لأنها لا تُطبق.
🧪 مثال على position: relative
div {
position: relative;
top: 20px;
left: 30px;
}
📌 يتم تحريك العنصر نسبة إلى موقعه الأصلي، لكن لا يخرج من مكانه في التدفق العام للمستند.
🧪 مثال على position: absolute
div {
position: absolute;
top: 10px;
left: 100px;
}
📌 العنصر يتموضع نسبةً إلى أقرب عنصر أب له يكون position غير static. وإذا لم يوجد، فيتموضع بالنسبة إلى عنصر <html>.
🧪 مثال على position: fixed
div {
position: fixed;
top: 0;
right: 0;
}
📌 العنصر يظل في مكانه حتى عند التمرير، ويكون مرتبطًا بنافذة العرض (viewport) مباشرة.
🧪 مثال على position: sticky
div {
position: sticky;
top: 0;
}
📌 العنصر يتصرف كـ relative في البداية، ثم يصبح ثابتًا (fixed) عندما يتم تمريره إلى موضع top المحدد.
📌 ملاحظات هامة
- خاصية
z-indexتُستخدم للتحكم في من يظهر فوق من عندما تتراكب العناصر. - لجعل العنصر مرجعيًا لعنصر absolute، يجب أن يكون له
position: relative;أوabsoluteأوfixedأوsticky. - العنصر
fixedلا يتأثر بالتمرير، مما يجعله مثاليًا لعناصر مثل الأشرطة العلوية الثابتة.
تعليقات
إرسال تعليق