خاصية الموضع يمكن أن تساعدك بالتلاعب في مكان العنصر، على سبيل المثال:
الموضع نسبي (relative) ، يقوم بوضع العنصر بالنسبة لموقعه الأصلي، في المثال بالأعلى سيتحرك العنصر للأسفل بمقدار 20px. إذا كنا نريد إضافة حركة بهذه الخصائص، يمكننا أن نرى كم سهولة التحكم تعطينا هذه الخصائص (على الرغم من أن هذه ليست فكرة جيدة، وذلك لأسباب تتعلق بالأداء):
الموضع النسبي (relative) هو واحد من ستة قيم للموضع (position). هنا بقية القيم:
القيم
ساكن (static): كل عنصر له الموضع ساكن (static) كوضع افتراضي، إذاً فالعنصر سوف يكون ثابت في شكل الصفحة العادية. لذلك إذا كان هناك قيم لـ left/right/top/bottom/z-index فإن ذاك لن يؤثر على العنصر.
نسبي (relative): يبقى موضع العنصر في مكانه في الصفحة، تماماً مثل قيمة الساكن (static). لكن الآن قيم left/right/top/bottom/z-index سوف تعمل. خصائص الموضع “ستزيح” العنصر من موضع الأصلي إلى الاتجاه الذي له القيمة.
مطلق (absolute): يُزال العنصر من مكانه في الصفحة، بقية العناصر ستتصرف وكأنه لا يوجد عنصر، كل خواص الموضع سوف تعمل مع هذه القيمة.
ثابت (fixed): يُزال العنصر من مكانه في الصفحة، مثل قيمة المطلق (absolute). في الحقيقة القيمتين يتصرفون بنفس الطريقة تقريباً، فقط العناصر ذوي القيم الثابتة (fixed) تكون دائماً مرتبطة بالصفحة، وليست لأي أب (parent) معين، ولا تتأثر بتمرير الصفحة (scrolling).
ملتصق (sticky) [تجريبي]: يتم التعامل مع العنصر كقيمة نسبية حتى يصل التمرير في الصفحة إلى مكان أو حد معين، وعند تلك النقطة يصبح العنصر كقيمة الموضع الثابت (fixed)، والذي يجعله ملتصق في مكانه.
وارث (inherit): قيمة الموضع (position) لا يتم إعطاءها بالتوالي، بحيث يمكن استخدام ذلك لإجبارها على التموضع في مكان معين، وترث قيمة الموضع من العنصر الأب.
مطلق (Absolute)
إذا كان العنصر الابن له قيمة الموضع المطلق (absolute)، سيتصرف العنصر الأب كما لو أن الابن غير موجود أبداً:
ولو قمنا بتعيين قيم مثل left (يسار) ، bottom (أسفل)، وright (يمين)، سنجد أن العنصر الابن يستجيب لقياسات الصفحة، وليس للعنصر الأب:
لجعل العنصر الابن يتموضع بشكل مطلق بالنسبة للعنصر الأب، يجب أن نعيِّن ذلك في عنصر الأب نفسه:
الآن الخواص مثل left (يسار)، right (يمين)، bottom (أسفل)، و top (أعلى) سوف تشير إلى العنصر الأب، لذلك إذا قمنا بجعل العنصر الابن شفافاً، سنرى أنه يقع يمين أسفل العنصر الأب:
ثابت (Fixed)
القيمة الثابتة (fixed) للموضع تشبه القيمة المطلقة (absolute)، حيث تساعدك على وضع العنصر في أي مكان نسبة إلى الصفحة، لكن هذه القيمة لا تتأثر بتمرير الصفحة (scrolling). إنظر إلى العنصر الابن في المثال التالي، وكيف أنك بمجرد التمرير بالصفحة، يستمر العنصر بالثبات أسفل الصفحة:
بيانات دعم المتصفح هذه من Caniuse التي فيها تفاصيل أكثر. يشير الرقم إلى أن المتصفح يدعم الميزة من هذا الإصدار ولغاية آخر إصدار.
ملتصق (sticky)
القيمة الملتصقة (sticky) هي بمثابة حل وسط بين القيم النسبية (relative) والقيم الثابتة (fixed). وحتى كتابة هذا المقال تُعتبر هذه القيمة تجريبية، أي أنها ليست جزءاً من المواصفات الرسمية، وغير معتمدة إلا من قبل متصفحات مُختارة. بعبارة أخرى، ربما ليس من الأفضل استخدام هذه الخاصية في موقع حقيقي حي.
ماذا تفعل هذه القيمة؟ حسناً، هي تسمح لك بوضع العنصر بالنسبة لأي شيء في الصفحة. بمجرد أن يقوم المستخدم بتمرير الصفحة لنقطة معينة، تقوم بتثبيت موضع العنصر لهذه النقطة، ويستمر بعرضها وكأنها بالموضع الثابت (fixed).
خذ المثال التالي:
العنصر سيكون بموضع نسبي (relative) حتى يصل تمرير الصفحة لمكان العنصر الذي سيكون على بعد 50px من أعلى الصفحة. في هذا النقطة يصبح العنصر ملتصقاً ويبقى بموضع ثابت (fixed) 50px أعلى الصفحة.
العرض التالي يوضح هذه النقطة، حيث يكون الشريط العلوي للتنقل بالموضع النسبي كوضع افتراضي، وشريط التنقل الثاني تم تعيينه للموضع ملتصق (sticky) في أعلى الصفحة. فضلاً لاحظ أن هذا العرض سيعمل فقط في متصفحات Chrome, Safari و Operaحتى وقت كتابة هذه المقالة.
بيانات دعم المتصفح هذه من Caniuse التي فيها تفاصيل أكثر. يشير الرقم إلى أن المتصفح يدعم الميزة من هذا الإصدار ولغاية آخر إصدار.
