منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

Position CSS شرح

لتغيير مكان العنصر فإننا نستخدم خاصية ال position بالإضافة الى الجهة المُراد العنصر الانتقال اليها سواء لأعلى او أسفل او يمين او يسار.
وال position له 5 قيم يُمكننا اضافتها للعنصر وهي:



position:
static;
relative;
fixed;
absolute;
sticky;


1position: static;

Static هي القيمة الافتراضية للعنصر وتعنى ان العنصر في الترتيب المنطقي له كما في ملف ال html



2position: relative;

3position: fixed;

4position: absolute;

5position: sticky;

هؤلاء القيم الأربعة (relative, fixed, absolute, sticky) يجب ان نضع معهم الجهة المُراد العنصر الانتقال إليها مثل :

  • top
  • bottom
  • right
  • left

top: 10px;وتعنى: بُعد العنصر بمقدار 10px من الاعلى


bottom: 12px;وتعنى: بُعد العنصر بمقدار 12px من الاسفل


right: 14px;وتعنى: بُعد العنصر عن جهة اليمين بمقدار 14px


left: 18px;وتعنى: بُعد العنصر عن جهة اليسار بمقدار 18px




2position: relative;

relative تعنى بُعد العنصر عنمكانة الأصليمثال على ذلك:


h1 {
  position: relative;
  top: 12px;
  right: 10px;
}

معنى ذلك ان العنصر يَبعد عنمكانة الأصليبمقدار 10px من جهة اليمين و 12px من الأعلى




3position: fixed;

Fixed اصلاً ترجمتها ثابت او مُثبت. ومن خواص العنصر ال fixed انه:

  1. خرج من الترتيب المنطقي له وان العنصر الذي يله في ملف ال html سوف يحل محله
  2. العنصر يكون ثابت بالنسبةلحدود الصفحةحتى لو عملت scroll
  3. عرض العنصر يتحدد على حسب المُحتوي الذي بداخلة

مثال على ذلك:


h1 {
  position: fixed;
  top:12px;
  right:10px;
 }

معنى ذلك ان العنصر يَبعد عنحدود الصفحةبمقدار 10px من جهة اليمين و 12px من الأعلى ويكون ثابت في مكانة ولا يتحرك حتي لو عملت scroll




4position: absolute;

من خواص العنصر ال absolute:

  1. العنصر الabsoluteيتحرك بالنسبة ل اقرب عنصر أب يحتوى على قيمة للposition؛ وفى حالة عدم وجود عنصر اب يحتوى على قيمة للposition ف انه يتحرك بالنسبة لحدود الصفحة. (هشرح النقطة دي بالتفصيل في الفيديو عشان لازم تطبيق عملي خصوصاً على النقطة دي)
  2. العنصر الabsolute يخرج من الترتيب المنطقي له وان العنصر الذي يله في ملف ال html سوف يحل محله مثل العنصر ال fixed
  3. عرض العنصر يتحدد على حسب المُحتوي الذي بداخلة

هذا الكود مهم جدا جدا جدا




5position: sticky;

هذا الكود ليس كود رسمي مُعتمد من منظمة ال w3.org ولكن لايزال تحت الاختبار (working draft) ولكنه يُستخدم كثيراً.
العنصر ال sticky هو عنصر ثابط في مكانة ويتحرك داخل العنصر الاب فقط وتظهر مُميزاته عند عمل scroll للأسفل بالماوس؛ وسيتم شرح هذه النقطة بالتفصيل في الفيديو لأنها تحتاج الى شرح عملي أكثر من الكتابة.




z-index شرح

اكيد طبعا انت لما هتحرك العناصر من مكانها عن طريق خاصية ال position ممكن عناصر تكون فوق عناصر أخرى (التحرك على محور ال z).
ونحل المشكلة دي عن طريق كود الz-index: رقم ;


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






Do not waste your time and start with us, now 😍