تعرّف على الخاصية Position في لغة CSS
ما هي الخاصية Position في CSS؟
هناك عدة طرق لتحديد موضع العناصر في CSS. في مقالة اليوم نتعرف على خاصية الموضع أو position التي تستخدم بشكل رئيسي لتحكم في تموضع العناصر داخل صفحة الويب وتحقيق ترتيب وتنسيق محدد للعناصر على الصفحة.
ما هي القيم الممكنة للخاصية Position في CSS
تحدد الخاصية Position كيفية وضع العنصر في مستند HTML وتثوم بتعيين القيم أو الخصائص العلوية واليمنى والسفلية واليسرى للموضع النهائي للعناصر.
وهناك أربع قيم مختلفة يمكن أن تأخذها خاصية الموضع Position
- قيمة الموضع ستاتكية Static
- قيمة الموضع ثابتة Fixed
- قيمة الموضع نسبية Relative
- قيمة الموضع مطلقة Absolut
الفرق بين القيم المخلتفة لخاصية الموضع Position
- قيمة الموضع ستاتيكية static: بشكل افتراضي في هذه الحالة يضبط الموضع لعنصر HTML وفقًا للتدفق الطبيعي للصفحة، ولا تؤثر الخصائص العلوية والسفلية واليسرى واليمنى عليها.
- قيمة الموضع ثابتة Fixed: في هذه الحالة يتم تحديد الموضع الثابت على وضع العنصر بالنسبة إلى إطار عرض الشاشة وتظل ثابتة على الشاشة عند التمرير.
- قيمة الموضع نسبية Relative: تحدد مواضع نسبية للعنصر بالنسبة إلى الموضع الطبيعي الذي كان من الممكن أن يكون عليه.
- قيمة الموضع مطلقة Absolut: تضع القيمة المطلقة العنصر متناسبًا تمامًا مع حاويته، مع تحديد الموضع المطلق، يمكنك وضع عنصر في أي مكان على الصفحة.
ما هي الخاصية Z-Index
بمعنى آخر تستخدم هذه الخاصية لتحديد ترتيب عمق العنصر أو موضع العنصر على المحور Z بحيث تكون العناصر ذات القيمة الأعلى فوق العناصر ذات القيمة الأقل وهي خاصية تعمل مع العناصر التي لها الموضع
- position:absolute
- position:relative
- position:fixed
على سبيل المثال في الكود التالي سنعطي قيم z-index مختلفة
z-index: auto;
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;
1. z-index: auto: هذه القيمة تعني أن العنصر سيستخدم الترتيب الافتراضي ولن يتم تحديد ترتيب تراكب خاص. يعني ذلك أن ترتيب العنصر سيتم تحديده استنادًا إلى ترتيب العناصر في تدفق الصفحة.
2. z-index: 1: هذه القيمة تعين ترتيب تراكب العنصر على أنه 1. يعني ذلك أنه سيكون أمام العناصر التي ليس لديها ترتيب تراكب أو لديها قيمة z-index أقل من 1.
3. z-index: 10;: هذه القيمة تزيد من ترتيب تراكب العنصر بشكل أكبر من القيم الأقل. سيكون العنصر أمام العناصر التي لديها قيم `z-index` أقل من 100.
4. z-index: 9999 هذه القيمة تزيد من ترتيب تراكب العنصر بشكل كبير جدًا. سيكون العنصر أمام معظم العناصر الأخرى على الصفحة.
5. z-index: -1: هذه القيمة تعين ترتيب تراكب سلبي للعنصر. يعني ذلك أن العنصر سيكون خلف العناصر التي لديها ترتيب تراكب موجب.
مثال:
.element1 {
position: relative;
z-index: 2;
}
.element2 {
position: absolute;
z-index: 1;
}
في هذا المثال element1 ستكون أمام element2.
