موقع العناصر

تحديد موقع العناصر في لغة CSS

يعد وضع العناصر بشكل مناسب على صفحات الويب أمرًا ضروريًا لتصميم مخطط جيد لهذه الصفحات. هناك عدة طرق في لغة CSS يمكننا استخدامها لتحديد موقع العنصر. في هذا الدرس سوف نتعلم طرق تحديد المواقع واحدة تلو الأخرى.

الموقع الثابت للعنصر Static

العنصر الثابت الموقع هو عنصر HTML بالوضع الإفتراضي , وتكون قيمة الخاصية position له static وهي القيمة الإفتراضية.
يتم دائمًا وضع العنصر الثابت الموقع وفقًا للتدفق الطبيعي للصفحة. لا تتأثر العناصر الموضوعة بشكل ثابت بالخصائص top و bottom و left و right و z-index .

مثال

تشغيل

.box {
padding: 20px;
background: #7dc765;
}

الموقع النسبي للعنصر Relative

الموقع النسبي للعنصر هو موقع هذا العنصر بالنسبة إلى موقعه الطبيعي. يتم التحكم في الموقع النسبي للعنصر عن طريق القيمة relative للخاصية position.
في مخطط تحديد المواقع النسبي ، يتم حساب موقع صندوق العنصر وفقًا للتدفق الطبيعي. ثم ينتقل الصندوق من هذا الوضع الطبيعي وفقًا للخصائص - top أو bottom و / أو left أو right.

مثال

تشغيل

.box {
position: relative;
left: 100px;
}

ملاحظة:

يمكن نقل عنصر متوضع نسبيًا و ان يتداخل مع عناصر أخرى ، لكنه يحافظ على المساحة المخصصة له في التدفق الطبيعي.

الموقع المطلق للعنصر Absolute

يطلق على العنصر العنصر المطلق الموقع عند تحديد قيمة الخاصية position له بالقيمة absolute .
يتم وضع العنصر المطلق الموقع بالنسبة إلى العنصر الأب الأول الذي له قيمة للخاصية position غير القيمة static. إذا لم يتم العثور على مثل هذا العنصر ، فسيتم وضعه في الزاوية "أعلى اليسار" من نافذة المتصفح. يمكن أيضًا تحديد إزاحات الصندوق باستخدام واحدة أو أكثر من الخصائص top و right و bottom و left.
يتم إخراج العناصر المطلقة تمامًا من التدفق الطبيعي وبالتالي لا تشغل مساحة في موقعها الأصلي. ومع ذلك ، يمكن أن تتداخل العناصر المطلقة مع العناصر الأخرى اعتمادًا على قيمة الخاصية z-index. أيضًا ، يمكن أن يكون للعناصر المطلقة هوامش ، ولا تتداخل مع أي هوامش أخرى.

مثال

تشغيل

.box {
position: absolute;
top: 200px;
left: 100px;
}

الموقع المثبت للعنصر Fixed

الموقع المثبت للعنصر هو فئة فرعية من تحديد الموقع المطلق. يتم تثبت العنصر إضافة القيمة fixed للخاصية position التابعة له.
الاختلاف الوحيد هو أن العنصر المثبت الموقع يكون ثابتًا فيما يتعلق بإطار عرض المتصفح ولا يتحرك عند التمرير.

مثال

تشغيل

.box {
position: fixed;
top: 200px;
left: 100px;
}