التحديد CSS (التحديد)

خصية position في CSS تستخدم لتعيين كيفية تحديد موضع العنصر في الصفحة، طرق تحديد المواضع في position (التحديد) في CSS تشمل: تحديد المواضع الثابتة (static)، تحديد المواضع المطلق (absolute)، تحديد المواضع المطلق (relative)، تحديد المواضع الثابت (fixed).

طرق تحديد المواضع في CSS

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

تحديد المواضع الثابتة (static)

تحديد موضع العناصر الثابتة بناءً على مسار الصفحة الطبيعي. العناصر الثابتة في الحالة الافتراضية توجد في المواضع الثابتة. العناصر الثابتة لا تؤثر علىtop،bottom،left،right، وz-indexخصائص.

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

.box　{
　　　　padding:　20px;
　　　　background:　#7dc765;
}

الموضع النسبي (relative)

العناصر الموضوعة بشكل نسبي يتم تحديد موقفها بالنسبة لموضعها الطبيعي.

في خطة الموضع النسبي، يتم حساب موقف حاوية العنصر بناءً على التدفق الطبيعي. ثم يتم تحريك الحاوية بناءً على خصائص - top أو bottom أو left أو right.

.box　{
　　　　position:　relative;
　　　　left:　100px;
}

الموضع الثابت (absolute)

العناصر الموضوعة بشكل دائم سيتم تحديد موقفها بالنسبة لأول عنصر آبجدي له موضع غير ثابت. إذا لم يتم العثور على هذا العنصر، فإنه سيتموضع في الجانب الأيسر العلوي من الصفحة بالنسبة للنافذة المتصفح. يمكن استخدام بعض أو جميع الخصائص المزيدية مثل top،right،bottom،و left للتحكم في تحريك الحاوية.

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

.box　{
　　　　position:　absolute;
　　　　top:　200px;
　　　　left:　100px;
}

الموضع الثابت (fixed)

الموضع الثابت هو فئة فرعية للموضع النسبي.

الفرق الوحيد هو أن العنصر الموضع بشكل ثابت يبقى ثابتًا بالنسبة لمنظور المستعرض، ولا يتغير عند التمرير.

.box　{
　　　　position:　fixed;
　　　　top:　200px;
　　　　left:　100px;
}