أفضل الممارسات لاستخدام خاصية (CSS Position)

ما هي خاصية CSS Position

تعد خاصية الوضع (Position) في CSS أداة قوية يمكن استخدامها للتحكم في موضع العناصر داخل واجهة المستخدم. تعمل هذه الخاصية على تحديد كيفية توضع العنصر داخل الشاشة، ويمكن أن يكون ذلك مرتبطًا بأبعاد الشاشة أو بالعناصر الأخرى في الصفحة. تأتي هذه الخاصية مع عدة قيم مثل: static، relative، absolute، fixed، و sticky، كل واحدة منها لها تأثير خاص على العنصر.

في هذا المقال، سنتعمق في دراسة خاصية الوضع في CSS وكيفية استخدام كل قيمة للحصول على التأثير المرجو.

خاصية الوضع في CSS مع القيمة الثابتة (static)

القيمة الافتراضية لخاصية الوضع في CSS هي ‘static’. عند تعيين خاصية الوضع إلى ‘static’، يتم تحديد موقع العنصر بناءً على التدفق الطبيعي للصفحة. وهذا يعني أن العنصر سيظهر بالترتيب الذي يظهر فيه في الكود HTML، ولا يمكن تحديده بواسطة خصائص ‘top’، ‘right’، ‘bottom’، أو ‘left’.

مثلاً، إذا كان لديك الكود التالي:

<div style="position: static;">هذا نص تجريبي</div>

سيتم عرض النص ‘هذا نص تجريبي’ في الموقع الذي يظهر فيه في الكود HTML، ولن يكون بإمكانك تحريكه بواسطة خصائص ‘top’، ‘right’، ‘bottom’، أو ‘left’.”

خاصية الوضع في CSS مع القيمة النسبية (relative)

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

مثلاً، إذا كان لديك الكود التالي:

<div style="position: relative; left: 20px;">هذا نص تجريبي</div>

فسيتم تحريك النص ‘هذا نص تجريبي’ بمقدار 20 بكسل إلى اليمين من موقعه الأصلي، لكنه سيظل يحتل نفس المكان في التدفق كما لو كان ‘static’.

خاصية الوضع في CSS مع القيمة المطلقة (absolute)

عند تعيين الوضع إلى ‘absolute’، يتم تحرير العنصر من التدفق الطبيعي للصفحة، ويمكن وضعه في أي مكان على الصفحة بناءً على القيم المعينة لخصائص ‘top’، ‘right’، ‘bottom’، و ‘left’. يتم تحديد موقع العنصر بالنسبة إلى أقرب والد له الذي لديه وضع غير ‘static’. إذا لم يكن هناك والد كهذا، فسيتم تحديد الموقع بالنسبة إلى العنصر الجذر .

مثلاً، إذا كان لديك الكود التالي:

<div style="position: absolute; top: 10px; left: 20px;">هذا نص تجريبي</div>

سيتم تحريك النص ‘هذا نص تجريبي’ بمقدار 10 بكسل من الأعلى و20 بكسل من اليسار بالنسبة إلى أقرب عنصر والد غير ‘static’ أو العنصر الجذر إذا لم يكن هناك والد غير ‘static’.

خاصية الوضع في CSS مع القيمة الثابتة (fixed)

عند تعيين الوضع إلى ‘fixed’، يتم تحرير العنصر من التدفق الطبيعي للصفحة، ويبقى في مكان محدد على الشاشة حتى عند التمرير. يمكن وضع العنصر في أي مكان على الشاشة باستخدام القيم المعينة لخصائص ‘top’، ‘right’، ‘bottom’، و ‘left’. موقع العنصر محدد بالنسبة إلى العنصر الجذر وليس الوالد.

مثلاً، إذا كان لديك الكود التالي:

<div style="position: fixed; bottom: 0; right: 0;">هذا نص تجريبي</div>

سيتم تحديد موقع النص ‘هذا نص تجريبي’ في الزاوية السفلية اليمنى للشاشة، وسيبقى في ذلك الموقع حتى عند التمرير.

خاصية الوضع في CSS مع القيمة الدبقة (sticky)

القيمة ‘sticky’ تشكل مزيجًا بين القيم ‘relative’ و ‘fixed’. عند تعيين الوضع إلى ‘sticky’، يتبع العنصر التدفق الطبيعي للصفحة حتى يصل إلى نقطة معينة تحددها خصائص ‘top’، ‘right’، ‘bottom’، و ‘left’. بمجرد وصوله إلى تلك النقطة، يتحول إلى وضع ثابت ويبقى في ذلك المكان حتى عند التمرير.

مثلاً، إذا كان لديك الكود التالي:

<div style="position: sticky; top: 0;">هذا نص تجريبي</div>

فعند التمرير، سيتبع النص ‘هذا نص تجريبي’ التدفق الطبيعي للصفحة حتى يصل إلى أعلى الشاشة، ومن ثم سيبقى في ذلك المكان على الشاشة حتى عند التمرير.

خاصية z-index في CSS

خاصية ‘z-index’ في CSS تسمح لك بتحديد ترتيب العناصر على محور z (العمق). تكون هذه الخاصية مفيدة عندما تكون هناك عناصر متداخلة وتريد تحديد أي منها يجب أن يظهر أمام الأخرى. القيم الإيجابية تضع العنصر أمام العناصر الأخرى، بينما القيم السلبية تضعه خلف العناصر الأخرى. يجب أن يكون للعنصر وضع غير ‘static’ لكي يكون ‘z-index’ فعالًا.

مثلاً، إذا كان لديك الكود التالي:

<div style="position: absolute; z-index: 1;">هذا النص سيظهر خلف النص الآخر</div>
<div style="position: absolute; z-index: 2;">هذا النص سيظهر أمام النص الآخر</div>

سيظهر النص الذي يحتوي على ‘z-index: 2’ أمام النص الذي يحتوي على ‘z-index: 1’.

كيفية تعيين خاصية الوضع في CSS مع القيمة المطلقة (absolute)

إعداد خاصية الوضع في CSS مع القيمة المطلقة يتطلب خطوتين. الخطوة الأولى هي تعيين الخاصية ‘position’ إلى ‘absolute’. الخطوة الثانية تتضمن استخدام خصائص ‘top’، ‘right’، ‘bottom’، و ‘left’ لتحديد موقع العنصر.

الكود التالي يعرض مثالاً على ذلك:

<div style="position: absolute; top: 50px; left: 100px;">هذا نص تجريبي</div>

في هذا المثال، تم تحديد موقع النص ‘هذا نص تجريبي’ بمقدار 50 بكسل من الأعلى و100 بكسل من اليسار بالنسبة إلى أقرب عنصر والد غير ‘static’ أو العنصر الجذر إذا لم يكن هناك والد غير ‘static’.”

كيفية تعيين خاصية الوضع في CSS مع القيمة النسبية (relative)

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

الكود التالي يعرض مثالاً على ذلك:

<div style="position: relative; top: 20px; left: -10px;">هذا نص تجريبي</div>

في هذا المثال، يتم تحريك النص ‘هذا نص تجريبي’ بمقدار 20 بكسل للأعلى و10 بكسل لليسار بالنسبة لموقعه الأصلي في التدفق الطبيعي للصفحة.

كيفية تعيين خاصية الوضع في CSS مع القيمة الثابتة (fixed)

لتعيين خاصية الوضع في CSS مع القيمة الثابتة، أولاً، عليك تعيين الخاصية ‘position’ إلى ‘fixed’. ثم استخدم خصائص ‘top’، ‘right’، ‘bottom’، و ‘left’ لتحديد موقع العنصر.

الكود التالي يعرض مثالاً على ذلك:

<div style="position: fixed; top: 0px; right: 0px;">هذا نص تجريبي</div>

في هذا المثال، تم تحديد موقع النص ‘هذا نص تجريبي’ في الزاوية العلوية اليمنى للشاشة. النص سيبقى في موقعه حتى عند التمرير على الصفحة.

كيفية تعيين خاصية z-index في CSS

“لتعيين خاصية ‘z-index’ في CSS، يجب أن يكون للعنصر وضع غير ‘static’. بعد تعيين وضع العنصر، يمكنك تعيين الخاصية ‘z-index’ إلى القيمة التي تريدها.

الكود التالي يعرض مثالاً على ذلك:

<div style="position: absolute; z-index: 3;">هذا النص سيظهر فوق العناصر الأخرى</div>

في هذا المثال، تم تعيين النص ‘هذا النص سيظهر فوق العناصر الأخرى’ ليظهر فوق العناصر الأخرى بسبب القيمة العالية لـ ‘z-index’. العناصر مع ‘z-index’ أقل ستظهر خلف هذا النص.

الختام

“بعد التعرف على خصائص الوضع في CSS، نعرف الآن أنها أدوات قوية تمكننا من التحكم بدقة في مواقع العناصر وترتيبها. إذا كنت مبتدئًا، فقد يكون من الصعب فهم كيفية استخدام هذه الخصائص في البداية، ولكن مع الممارسة والتجربة، ستصبح أكثر ارتياحًا في استخدامها.

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

الأسئلة المتداولة (FAQ)