السلام عليكم، سنرى في هذا الدرس الخاصية POSITION و قيمها، و سنرى أيضاً الخواص المتعلقة بها.
ما هي الخاصية POSITION ؟
الخاصية 'POSITION' هي خاصية مسؤولة عن التعديل على وضعية العناصر HTML في صفحات الويب المتواجدة بها، و لديها أربع خواص متعلقة بها تحدد مكان العنصر، و خمس قيم خاصة تحدد نوع وضعية العنصر، و تقبل أيضاً قيمتين من القيم الشاملة.
الخواص المتعلقة بالخاصية POSITION
الخواص المتعلقة بالخاصية 'POSITION' أو ما يصطلح عليهم بخواص الإزاحة هم خواص تلعب دور الإحداثيات بالنسبة للعنصر المتوفر على الخاصية 'POSITION'، و قيمتهم التلقائية هي 'AUTO' حيث في تواجدها تأمر متصفح الإنترنت بحساب مسافة الإزاحة للعنصر و توظيفها له، و تقبل جميع القيم المطلقة و جميع القيم النسبية منهم الموجبة و السالبة، و أيضا تقبل قيمة 'INHERIT' و قيمة 'INITIAL' من القيم الشاملة حيث أن القيمة 'INHERIT' هي قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الإزاحة، القيمة تورث للعنصر مسافة الإزاحة من العنصر المحتوي له، أما القيمة 'INITIAL' فهي قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة خواص الإزاحة، القيمة ترجع العنصر إلى القيمة التلقائية للخواص، و التي هي القيمة 'AUTO'، و هم أربع خواص :
* TOP : هي الخاصية المسؤولة عن إزاحة العنصر إلى الأسفل بالقيمة الموجبة، و إزاحة العنصر إلى الأعلى بالقيمة السالبة.
* RIGHT : هي الخاصية المسؤولة عن إزاحة العنصر إلى اليسار بالقيمة الموجبة، و إزاحة العنصر إلى اليمين بالقيمة السالبة.
* BOTTOM : هي الخاصية المسؤولة عن إزاحة العنصر إلى الأعلى بالقيمة الموجبة، و إزاحة العنصر إلى الأسفل بالقيمة السالبة.
* LEFT : هي الخاصية المسؤولة عن إزاحة العنصر إلى اليمين بالقيمة الموجبة، و إزاحة العنصر إلى اليسار بالقيمة السالبة.
و يجب إقحام إما خاصية واحدة أو خاصيتين مختلفتي المستوى، يعني إما 'TOP' و إما 'BOTTOM' في المستوى العمودي، و إما 'RIGHT' و إما 'LEFT' في المستوى الأفقي.
الفيديو التوضيحي للدرس
القيم الخاصة للخاصية POSITION
القيمة STATIC
تعتبر القيمة 'STATIC' القيمة التلقائية للخاصية 'POSITION' حيث تُظهر العنصر بالتنسيق التلقائي للـ HTML.
القيمة RELATIVE
تجعل القيمة 'RELATIVE' العنصر يتموضع نسبة إلى وضعيته التلقائية، بحيث يمكن التعديل على مكانه بخواص الإزاحة.
القيمة FIXED
تجعل القيمة 'FIXED' العنصر يتموضع نسبة إلى نافذة المتصفح، بحيث يمكن التعديل على مكانه بخواص الإزاحة ليكون عنصر ثابث رغم عمل Scrolling للصفحة المتواجد بها.
القيمة ABSOLUTE
تجعل القيمة 'ABSOLUTE' العنصر يتموضع نسبة إلى عنصر محتوٍ له يتوفر على خاصية 'POSITION' مُقيَّمة بـ 'RELATIVE' أو 'FIXED' أو 'ABSOLUTE'، و في حالة عدم توفر العناصر المحتوية له على الخاصية 'POSITION'، فالعنصر يتموضع نسبة إلى كامل صفحة الويب المتواجد بها، و في كلتا الحاتين يمكن التعديل على مكانه بخواص الإزاحة.
القيمة STICKY
تجعل القيمة 'STICKY' العنصر يتموضع كتأثير القيمة 'RELATIVE'، وعند عمل Scrolling للصفحة المتواجد بها، يصل العنصر إلى نهاية تموضعه كتأثير القيمة 'RELATIVE'، فيتحول تموضعه من شبه تأثير القيمة 'RELATIVE' إلى شبه تأثير القيمة 'FIXED'، و يبقى ثابثاً بالنسبة لنافذة المتصفح مع تطبيق تأثير خواص الإزاحة بعد تحول نوع تموضعه.
القيمتين الشاملتين المقبولتين من طرف الخاصية POSITION
- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'POSITION'، القيمة تورث للعنصر نوع الوضعية من العنصر المحتوي له.
- INITIAL : قيمة ترجع العناصر إلى القيمة التلقائية للخواص، و في حالة الخاصية 'POSITION'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، و التي هي القيمة 'STATIC'.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس