المواقع Positioning مع CSS

كيف يمكننا التحكم بمواقع عناصر الـ HTML في صفحة الويب بواسطة CSS..!!! ماهي الخاصية التي توفرها الـ CSS لنتمكن من ضبط مواقع عناصر الـ HTML على صفحة الويب ..؟؟!! و ما هي طريقة ترتيب العناصر المتداخلة في صفحة الويب..؟!! وكيف تعمل الخاصية Position مع Box Model في CSS…؟؟!!

تعد خاصية Position في CSS أحد الأدوات الرئيسية التي تمنحنا التحكم الكامل في تخطيط صفحات الويب. تتيح لنا هذه الخاصية تحديد موقع العناصر داخل الصفحة وتغيير تدفقها وتفاعلها مع عناصر أخرى. في هذا المقال، نتعرف على خاصية Position ونلقي نظرة على أنواعها المختلفة وكيفية استخدامها من خلال تعليمات CSS. لنبدأ….

في هذا المقال نتعرف على :

خاصية تحديد المواقع Position Property.
الموقع التلقائي (الافتراضي ) Static position.
الموقع الثابت Fixed Position.
الموقع النسبي Relative Position.
الموقع المطلق Absolute Position.
الموقع اللاصق sticky Position.
العناصر المتداخلة Overlapping Elements و خاصية z-index.
نموذج Model Box و الخاصية Position.

خاصية تحديد المواقع Position Property

خاصية position في CSS أحد الأدوات القوية والمهمة لتحقيق تنسيقات و ترتيبات معقدة في صفحات الويب. تُستخدم هذه الخاصية لتحديد موقع العناصر داخل المستند الـ HTML وتحديد كيفية تفاعلها مع العناصر الأخرى. توفر خاصية position قيمًا متعددة تمنح المطورين مرونة كبيرة في تصميم وتوزيع عناصر الصفحة بشكل دقيق وفقًا للمتطلبات المحددة.

تسمح خاصية تحديد المواقع Position Property بتحديد مواقع عناصر الـ HTML على صفحة الويب . ويمكن بواسطتها أيضًا ضبط ترتيب تموضع العناصر أي عنصر خلف عنصر آخر ، كذلك من خلالها يمكن تحديد ما يجب أن يحدث عندما يكون محتوى العنصر كبيرًا جدًا.

تقوم خاصية تحديد المواقع Position Property بتحديد موقع العناصر بشكل دقيق سواء بالنسبة لصفحة الويب أو بالنسبة لموقع العنصر من العناصر الأخرى وهذا باستخدام الخصائص :

top المسافة من الأعلى إلى العنصر .
bottom المسافة من الأسفل إلى العنصر .
left المسافة من اليسار الى العنصر.
right المسافة من اليمين الى العنصر.

ومع ذلك ، لن تعمل هذه الخصائص ما لم يتم تعيين خاصية الموقع Position أولاً. كما أنها تعمل بشكل مختلف اعتمادًا على القيم المستخدمة مع الخاصية Position لتحديد الموقع فهناك خمس قيم مختلفة لتحديد المواقع وهي:

Static: هي القيمة الافتراضية للعناصر، وتعني أن العنصر يتم وضعه وفقًا لتدفق الصفحة العادي.
Relative: تسمح لنا بتحديد موقع العنصر بناءً على موقعه الأصلي وبالنسبة للمواقع الأخرى.
Absolute: تسمح لنا بتحديد موقع العنصر بناءً على الموقع الأب المقترن به.
Fixed: تثبت العنصر في موقعه بغض النظر عن التمرير في الصفحة.
Sticky: تثبت العنصر في موقعه بناءً على التمرير، حيث يظل ثابتًا حتى يتم تمريره خارج العرض.

و لتطبيق خاصية Position في على عناصر الـ HTML في صفحة الويب ،يمكننا استخدام القاعدة التالية في CSS:

selector {
   position: value;
}

حيث يتم استبدال selector بمحدد العنصر الذي ترغب في تطبيق الخاصية عليه، و value بإحدى القيم المذكورة سابقًا.

خاصية Position في CSS توفر لنا القدرة على التحكم في مواقع العناصر داخل صفحات الويب. بفضل القيم المتاحة مثل relative و absolute و fixed و sticky ، يمكننا تحقيق تخطيطات مرنة ومتنوعة. بالإضافة إلى ذلك، يمكننا استخدام الخاصية بالتزامن مع خصائص أخرى مثل top و bottom و left و right لتحقيق التحكم الكامل في مواقع العناصر.

الموقع التلقائي Static Position

Static Position هو الموقع التلقائي (الافتراضي) للعناصر في CSS ، وهو الموقع الذي يتم تعيينه بشكل افتراضي لجميع العناصر عند عدم تحديد أي قيمة لخاصية position .عندما تكون قيمة position محددة بـ static ، فإن العنصر يتبع التدفق العادي للصفحة ولا يتأثر بالخاصية. يعني ذلك أن العنصر سيعرض في مكانه الأصلي وفقًا للترتيب الطبيعي للعناصر في المستند. بمعنى آخر، لن يتم تطبيق أي تأثيرات خاصة على العنصر بسبب الخاصية Position .

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

هذه العناصر الثابتة ذات المواقع من نوع Static position لا تتأثر بالخصائص top العلوية و bottom السفلية left اليسار right اليمنى. بمعنى لن تكون قادرًا على تحريكها بأي جهة عند استخدام هذهِ القيمة.

وهنا مثال يوضح تطبيق الموقع التلقائي Static position من خلال تعليمات CSS:

.box1{  border:solid black;
        height: 300px;
        width: 300px;
       }
.box2{
        background-color: rgb(152, 194, 219);
        height: 150px;
        width: 150px;
        position:static;  
        }

لتكن النتيجة

للإطلاع على كود المثال بالكامل انـقر هنـا .

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

الموقع الثابت Fixed Position

الموقع الثابت (Fixed Position) في CSS هو قيمة لخاصية Position تسمح بتحديد موقع العنصر بشكل ثابت بالنسبة إلى نافذة المشاهدة (viewport)، بغض النظر عن التمرير العمودي أو الأفقي للصفحة. يعني ذلك أن العنصر سيبقى في مكانه حتى عند التمرير، مما يخلق تأثيرًا ثابتًا وثابتًا على الشاشة.

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

يستخدم الموقع الثابت Fixed Position عادة لعناصر الواجهة الثابتة مثل شريط التنقل العمودي أو العناصر الثابتة في الجزء العلوي أو السفلي من الصفحة مثل الشريط العلوي الثابت أو قائمة التنقل العمودية الثابتة. يمكن أيضًا استخدامه لإنشاء تأثيرات بصرية مثل البوب آب (popup) أو شريط إعلاني ثابت.

عند تعيين العنصر بالموقع الثابت Fixed Position. تقوم خاصية ؛Position بإزالة عنصر الـ HTML من التدفق الطبيعي للصفحة. و يمكن أن تتداخل العناصر ذات المواضع fixed position مع عناصر أخرى. وهذا المثال كيف يكون موقع العنصر من نوع Fixed Position:

.box1{
        border:solid black;
        height: 900px;
        width: 300px;
        position: relative;
       }  
.box2{
        background-color: rgb(152, 194, 219);
        height: 150px;
        width: 150px;
        position:fixed;
        top: 50px;
        left: 30px; 
        }

لتكن النتيجة

وحاول التمرير للأسفل انـقر هنـا للإطلاع على كود المثال بالكامل.

من الجوانب الهامة للعمل مع الموقع الثابت Fixed Position أنه يجب أن يتم توخي الحذر عند استخدامه، خاصة عندما يتعلق الأمر بأجهزة الهاتف المحمول والأجهزة اللوحية التي تحتوي على شاشات صغيرة. قد يؤدي استخدام الموقع fixed بشكل غير مناسب إلى تغطية المحتوى وتعطيل تجربة المستخدم على هذه الأجهزة. يُنصح بتجربة واختبار الموقع fixed بعناية على مختلف الأجهزة والمقاسات لضمان التوافق والوصولية.

الموقع النسبي Relative Position

الموقع النسبي (Relative Position) في CSS هو قيمة لخاصية Position تسمح بتغيير موقع العنصر بالنسبة إلى موقعه الأصلي في تدفق المستند، دون التأثير على مواقع العناصر الأخرى. عند تعيين قيمة position للعنصر بـ relative ، يمكننا تحديد موقع العنصر باستخدام الخصائص الأخرى مثل top و right و bottom و left .

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

يتم تحديد موقع العنصر النسبي Relative بناءً على مكانه الأصلي في تدفق المستند. فعندما تقوم بتحديد قيم للخصائص مثل top و right و bottom و left ، فإن العنصر سيتحرك بالنسبة إلى موقعه الأصلي بمقدار المسافات المحددة. على سبيل المثال، إذا حددت top: 20px و left: 30px ، فسيتحرك العنصر 20 بكسل للأسفل و 30 بكسل لليمين بالنسبة لموقعه الأصلي.

وهنا مثال لتوضيح كيف يكون موقع العنصر من نوع Relative Position :

.box1{
        border:solid black;
        height: 600px;
        width: 400px;
        position: relative;
       }
.box2{
        background-color: rgb(152, 194, 219);
        height: 150px;
        width: 150px;
        position:relative; 
        left: 300px;
        top:15px;
        }

لتكن النتيجة

للإطلاع على كود المثال بالكامل انـقر هنـا.

من الجوانب الهامة للاستخدام الصحيح للموقع النسبي (Relative Position) في CSS هو أن العنصر لا يترك أثرًا على المساحة المحيطة به. وبمعنى آخر، فإن المساحة الأصلية التي تحتلها العناصر الأخرى لن تتأثر بتغيير موقع العنصر النسبي. وهذا يعني أن العنصر لا يتداخل مع العناصر الأخرى ولا يؤثر على تدفق المستند بشكل عام.

الموقع المطلق Absolute Position

الموقع المطلق (Absolute Position) في CSS هو قيمة لخاصية Position تسمح بتحديد موقع العنصر بالنسبة إلى أقرب عنصر يحتوي على خاصية position غير static ، مثل عنصر والد موجود في تدفق المستند. عند تعيين قيمة position للعنصر بـ absolute ، كما يمكن تحديد موقع العنصر باستخدام الخصائص الأخرى مثل top و right و bottom و left .

يتم استخدام الموقع المطلق (Absolute) عادة لتحديد مواقع العناصر بشكل دقيق ومحدد. يمكن استخدامه لإنشاء تأثيرات متقدمة مثل تراكب العناصر أو النصوص العائمة فوق الصور. كما يُستخدم لإنشاء قوائم منبثقة ونوافذ منبثقة (pop-up) وأشرطة جانبية ثابتة.

يختلف الموقع المطلق Absolute عن الموقع النسبي Relative في الشكل الذي يتحرك به العنصر. بدلاً من التحرك بالنسبة إلى موقعه الأصلي في تدفق المستند، يتحرك العنصر الذي يحمل الموقع المطلق بالنسبة إلى أقرب عنصر والد يحتوي على خاصية position غير static . إذا لم يتم العثور على عنصر والد يحمل الموقع المطلق، فسيتحرك العنصر بالنسبة إلى <body> المستند نفسه.

باستخدام الخصائص مثل top و right و bottom و left ، يمكننا تحديد المسافة بين العنصر المطلق والعنصر الأب القريب. على سبيل المثال، بتحديد top: 20px و left: 30px ، سيتحرك العنصر المطلق 20 بكسل للأسفل و 30 بكسل لليمين بالنسبة إلى العنصر الأب.

وهنا مثال لتوضيح كيف يكون موقع العنصر من نوع Absolute Position:

.box1{
        border:solid black;
        height: 600px;
        width: 400px;
        position: relative;
       }   
.box2{
        background-color: rgb(152, 194, 219);
        height: 150px;
        width: 150px;
        position: absolute;
        top: 0px;
        right: 0px;
        }

لتكن النتيجة

للإطلاع على كود المثال بالكامل انـقر هنـا.

من الجوانب الهامة للاستخدام الصحيح للموقع المطلق (Absolute Position) في CSS هو أنه يمكن أن يؤثر على تدفق المستند وتداخل العناصر. قد يتسبب في تغطية المحتوى الأخر وتعطيل تجربة المستخدم إذا لم يتم استخدامه بحذر. يجب أن يتم تجربة الموقع المطلق واختباره على مختلف الأجهزة والمقاسات لضمان التوافق والوصولية.

الموقع الملصق sticky

الموقع الملصق (Sticky Position) في CSS هو قيمة لخاصية Position تسمح بتثبيت العنصر في مكانه عندما يصل إلى موضع محدد على الصفحة، ولكن يتحرك عندما يتجاوز الموضع المحدد. يعمل الموقع الملصق بشكل مشابه للموقع النسبي (Relative Position) والموقع المطلق (Absolute Position)، لكنه يوفر تجربة تثبيت العنصر أثناء التمرير (scrolling) في الصفحة.

ميزة الموقع الملصق هي أنه يسمح بإنشاء قوائم جانبية ثابتة (fixed sidebars) أو عناصر واجهة المستخدم العائمة (floating UI elements) التي تظل مرئية أثناء التمرير في الصفحة. يساعد في تحسين تجربة المستخدم وتوفير وصول سهل إلى المحتوى المهم.

من الجوانب الهامة لاستخدام الموقع الملصق Sticky Position هو أنه يعمل فقط في حاويات العناصر التي لها ارتفاع محدد وتم تمكين خاصية التمرير (scrolling). يجب أن يكون للعنصر الأب الذي يحتوي على الموقع الملصق خاصية overflow قيمة مختلفة عن visible (مثل scroll أو auto ) حتى يعمل الموقع الملصق بشكل صحيح.

لتحديد الموقع الملصق Sticky للعنصر، يتم استخدام الخاصية position: sticky بالإضافة إلى تحديد قيمة للخصائص الأخرى مثل top و right و bottom و left . عندما يصل العنصر إلى الموضع المحدد (المحدد بواسطة القيمة المحددة للخصائص الأخرى) أثناء التمرير، يتم تثبيته في مكانه. عندما يتجاوز الموضع المحدد، يستأنف التمرير ويتحرك العنصر بشكل طبيعي.

وهنا مثال لتوضيح كيف يكون موقع العنصر من نوع sticky:

.box1{
        border:solid black;
        height: 600px;
        width: 300px;
        position: relative;
        top:-50px;
       }    
.box2{
        background-color: rgb(152, 194, 219);
        height: 150px;
        width: 150px;
        position:sticky;
        top:30px;
        right: 30px;
        }

لتكن النتيجة

وحاول التمرير للأسفل انـقر هنـا للإطلاع على كود المثال بالكامل.

العناصر المتداخلة Overlapping Elements و خاصية z-index

العناصر المتداخلة (Overlapping Elements) هي عناصر في صفحة الويب التي تتداخل مع بعضها البعض في العرض، حيث يتم عرض جزء من عنصر واحد فوق جزء من عنصر آخر. يمكن أن يكون هذا مفيدًا لإنشاء تأثيرات بصرية مثل العناصر العائمة أو النص المتداخل.

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

قيمة z-index يمكن أن تكون أي عدد صحيح (موجب أو سالب) أو القيمة auto . العناصر التي تحمل قيمة z-index الأعلى ستظهر فوق العناصر التي تحمل قيمة z-index أقل. إذا كانت العناصر لديها نفس القيمة لـ z-index ، فإن ترتيب العرض سيعتمد على ترتيب العناصر في الشجرة الهيكلية للمستند (DOM).

من الهام ملاحظة بعض النقاط حول استخدام z-index :

تعمل z-index فقط على العناصر التي تستخدم خاصية position بقيمة relative ، absolute, fixed .
يجب أن يتم تعيين position لكلا العنصرين المتداخلين (العنصر الأمامي والعنصر الخلفي) لتحديد ترتيبهما.
يمكن أن تكون القيم السالبة لـ z-index مفيدة لتحديد العناصر التي تظهر خلف العناصر الأخرى.
يمكن للعناصر الأب أن تؤثر على ترتيب العرض باستخدام z-index ، حيث يمكن أن تكون قيم z-index للعناصر الفرعية نسبية للعنصر الأب.
إذا تداخل عنصران بدون تحديد z-index ، فسيتم عرض العنصر الذي تم وضعه أخيرًا في كود HTML في الأعلى.

والمثال التالي يوضح طريقة عمل عناصر متداخلة بواسطة الخاصية z-index مع الخاصية Position :

.box1{
        background-color: rgb(158, 207, 145);
        height: 150px;
        width: 150px;
        position: absolute;
        z-index: -1;
       }
.box2{
        background-color: rgb(119, 141, 240);
        height: 150px;
        width: 150px;
        position: relative;
        left: 30px;
        top:30px;
        z-index: 1;  
        }
.box3{
        background-color: rgb(188, 199, 86);
        height: 150px;
        width: 150px;
        position:fixed; 
        left:60px;
        top:150px;
        z-index: 2;
        } 
.box4{
        background-color: rgb(197, 78, 78);
        height: 150px;
        width: 150px;
        position:fixed;
        left: 90px;
        top:200px;
        z-index: 3;
        }

لتكن النتيجة

العناصر المتداخلة Overlapping Elements و خاصية z-index

للإطلاع على كود المثال بالكامل انـقر هنـا.

عند استخدام z-index ، يجب التأكد من احترام التوافقية وتجربة المستخدم، حيث قد يؤدي استخدامها بشكل غير صحيح إلى تداخل العناصر وتشويش التجربة العامة للمستخدم. ينبغي مراجعة واختبار التصميم على مختلف المتصفحات والأجهزة للتأكد من العرض الصحيح والتوافق.

نموذج Model Box و الخاصية Position

يعد نموذج Model Box في CSS مفهومًا أساسيًا يحدد كيفية عرض العناصر وتنظيمها على صفحة الويب. ففهم نموذج Model Box أمرًا ضروريًا عند العمل باستخدام خاصية Position لأنه يؤثر على كيفية وضع العناصر وتفاعلها مع بعضها البعض.

يتكون نموذج Model Box في CSS من أربعة مكونات: المحتوى (Content)، ومساحة الحشو (Padding)، والحدود (Border)، و الهامش (margin). يساهم كل مكون من هذه المكونات في الحجم الكلي والتخطيط للعنصر. اقرأ كثر في مقال عن نموذج الـ Box Model في CSS .

في CSS يعمل نموذج Model Box جنبًا إلى جنب مع الخاصية Position لتحديد تخطيط العناصر و مواقعها على صفحة الويب. تؤثر خصائص نموذج Model Box (المحتوى Content، والحشو Padding، والحدود Border، والهامش margin) على حجم العنصر وتباعده، بينما تسمح لك خاصية الموقع (Position ) بالتحكم في كيفية وضع العناصر داخل تدفق التخطيط أو نسبة إلى عناصر أخرى.

دعونا نرى كيف يتفاعل نموذج Model Box مع الخاصية Position:

المواقع الثابت والنسبي Static and Relative Positioning: عندما يتم وضع عنصر بشكل Static أو نسبي Relative ، يتصرف نموذج Model Box كما هو متوقع. يتم تحديد موقع العنصر ضمن التدفق الطبيعي للمستند، وتؤثر خصائص مساحة الحشو(Padding)، والحدود (Border)، و الهامش (margin)على تخطيطه وفقًا لذلك.
الموقع المطلق Absolute Positioning : عندما يتم تحديد موقع العنصر بشكل مطلق، فإنه يتم إزالته من التدفق الطبيعي، ويتم تحديد موضعه بالنسبة إلى أقرب عنصر حاوي له. في هذه الحالة، يظل نموذج Model Box قابلاً للتطبيق، لكن أبعاد العنصر (بما في ذلك مساحة المتروكة Padding، والحدود Border، و الهامش margin ) لم تعد تؤثر على تخطيط العناصر الأخرى.
الموقع الثابت Fixed Positioning: على غرار الموقع المطلق Absolute ، يزيل الموقع الثابت fixed العنصر من التدفق الطبيعي. ومع ذلك، يتم تثبيت موضع العنصر بالنسبة إلى إطار العرض، ويظل في نفس الموقع حتى عند التمرير. لا تزال خصائص نموذج Model Box مطبقة، لكن أبعاد العنصر لا تؤثر على العناصر الأخرى.
الموقع الملصق Sticky Positioning: عندما يتم وضع عنصر على أنه ملصق ثابت فإنه يتصرف كعنصر تم وضعه نسبيًا حتى يتم الوصول إلى عتبة محددة. بمجرد تجاوز الحد (عادة عندما يصل التمرير إلى نقطة معينة)، يصبح العنصر عالقًا ويظل ثابتًا في موضع محدد. تنطبق خصائص نموذج Model Box مطبقة كالمعتاد.

من خلال فهم خاصية position والتعامل الفعال مع نموذج Model Box، سيمكنك تحقيق التنسيقات والترتيبات المرنة والديناميكية التي تلبي احتياجات تصميم صفحات الويب الخاصة بك. ستتمكن من إنشاء تجربة مستخدم فريدة وجذابة وإضفاء الحياة على أفكار التصميم الخاصة بك.

إلى هنا ينتهي هذا المقال الذي قدم شرحًا مفصلاً للقيم المختلفة لخاصية Position وكيفية تطبيقها على المواقع في CSS. ناقش المقال قيم مثل static و relative و absolute و fixed و sticky..في المقال أوضحنا أنه باستخدام خاصية position بالاقتران مع خاصية z-index وفهم Box model ، يمكن للمطورين تحقيق تصميمات متقدمة وجذابة وتوفير تجربة مستخدم فريدة على صفحات الويب. يجب الاستفادة من هذه الأدوات بحكمة واحترافية لضمان التوافقية والوصولية وتحقيق النتائج المرجوة في تصميم الواجهة وتنظيم المحتوى.

المواقع Positioning مع CSS