position

خاصية position في CSS تستخدم لتحديد نوع وموقع العنصر في الصفحة، وتمكن المصممين من تحديد موقع العناصر بشكل دقيق وتحقيق تأثيرات مثل الانزلاق والتثبيت والتلاشي.

تتضمن قيم خاصية position الرئيسية هي:

• static: هي القيمة الافتراضية لخاصية position ولا تؤثر على موقع العنصر في الصفحة.
• relative: تجعل الموقع الأصلي للعنصر كما هو، ولكن يمكن تحريكه بشكل نسبي بواسطة الخصائص top, bottom, left, و right.
• absolute: تجعل الموقع الأساسي للعنصر هو العنصر الذي يحتوي عليه، ويمكن تحريكه بشكل مطلق بواسطة الخصائص top, bottom, left, و right.
• fixed: تجعل الموقع الأساسي للعنصر ثابت بالنسبة للنافذة المتصفح، ولا يتأثر بتحريك الصفحة أو التمرير.
• sticky: يتم تثبيت العنصر بشكل نسبي أثناء التمرير، وعندما يصل إلى الحد الأقصى الذي يحدده الخصائص top, bottom, left, و right، يتم تحويله إلى fixed.

وإليك بعض الأمثلة على استخدام position في CSS:

/* تحديد الموقع النسبي للعنصر */
position: relative;
top: 10px;
left: 20px;

/* تحديد الموقع المطلق للعنصر */
position: absolute;
top: 50%;
left: 50%;

/* تحديد الموقع الثابت للعنصر */
position: fixed;
top: 0;
left: 0;

/* تحديد الموقع الثابت النسبي للعنصر */
position: sticky;
top: 10px;

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

شرح خاصية z-index

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

تتكون قيمة z-index من رقم صحيح يبدأ من الصفر. ويمكن تعيين قيمة z-index لأي عنصر داخل صفحة الويب، سواء كان ذلك عنصرًا داخليًا أو خارجيًا. يمكن استخدام العنصر الأعلى في القيمة لتحديد عنصر محدد كأعلى العناصر في الصفحة.

وفيما يلي بعض الأمثلة على استخدام خاصية z-index في CSS:

1. تحديد ترتيب العناصر:

div {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

p {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

في هذا المثال، سيتم عرض عنصر p فوق عنصر div بسبب قيمة z-index الأعلى التي تم تعيينها لـ p.

2. استخدام العناصر الداخلية:

div {
  position: relative;
  z-index: 1;
}

p {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

في هذا المثال، تم تعيين قيمة z-index للعنصر div الداخلي، حيث تم استخدام القيمة الأعلى للعنصر p الداخلي الموجود داخل div.

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

اختبار css position

اضغط على start التي في منتصف الاختبار لبدء الاختبار