انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 60
دورة لغة CSS

التحكم في طبقات صفحة HTML بلغة CSSCSS Position

سوف تتعلم في هذا الدرس كيفية عرض عناصر HTML علي المتصفح وكيف يمكن تغيير الوضع الأفتراضي إلي ثبات العنصر مع تحريك scroll وما هي الطبقات داخل صفحة الويب في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
9
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
8,316
محتوى الدرس
في هذا الدرس 9تصفّح المواضيع

HTML page layers التحكم في طبقات صفحة HTML بلغة CSS

تُعرض عناصر HTML داخل صفحة الويب في طبقات فوق بعضُها لعبض ولكن في الوضع الأفتراضي أي صفحة ويب يُصف (يتم ترتيب ) بداخليها العناصر داخل layer طبقة واحدة ولكن في لغة CSS يمكن إنشاء طبقة واحدة جديدة لعنصر واحد أو طبقات أخري لعدة عناصر معاً لكي يتم تحريك العنصر في طبقة مٌنفصلة دون أن يؤثر علي العناصر المُحيطة ولوضع عنصر أعلي عنصر وأيضاً لتثبيت عنصر في موضع معين يظهر أمام المُستخدم حتي مع إستخدام scroll يمكن أن تكون الطبقه أعلي طبقة أخري أو خلفها ويمكن التحكم في ترتيب الطبقات فوق بعضُها لبعض في لغة CSS.


لماذا نستخدم الطبقات في لغة CSS؟

  • لتحريك أي عنصر دون التأثير علي العناصر المُحيطة في طبقة منفصلة أعلي أو خلف الطبقة الحالية.
  • لتثبيت عنصر في موضع معين يظهر أمام المُستخدم حتي مع إستخدام scroll.

HTML Layers

أعلي طبقه هي طبقة لون blue ثم طبقة orange ثم طبقة pink.

CSS Position خاصية Position في لغة CSS

تُستخدم خاصية position في لغة CSS لعمل طبقات في صفحة الويب ولتثبيت بعض العناصر في مواقع معينه عند عمل scroll داخل الصفحة.


قيم خاصية position في لغة CSS:

  • static تُستخدم لعرض العنصر في layer طبقة واحدة مع جميع العناصر الأخري في نفس الصفحة وهي القيمة الأفتراضية.
  • relative تُستخدم  لعرض العنصر في layer طبقة جديدة  ولكن عند تحريكه في أي إتجاه يتحرك من مكانه.
  • fixed تُستخدم  لتثبيت العنصر ولأضافتة في layer طبقة جديدة  يتحرك من حدود الصفحة ويتحرك مع scroll.
  • absolute تُستخدم  لأضافة العنصر في layer طبقة جديدة  ولكن عند تحريكه في أي إتجاه يتحرك من حدود الصفحة ويتحرك مع scroll ولا يكون ثابت بعكس fixed.
  • sticky تُستخدم  لتثبيت العنصر ولأضافتة في layer طبقة جديدة  ولكن عند تحريكه في أي إتجاه يتحرك بناء علي أطراف الصفحة وعند تحريك scroll يتم تبديل قيم relative  إلي fixed.

CSS position syntax

طريقة كتابة خاصية position في لغة CSS.

HTML 
position:value;

CSS position values

قيم خاصية position في لغة CSS.

HTML 
position:static|absolute|fixed|relative|sticky|initial|inherit;

CSS position static خاصية Position مع القيمة static في لغة CSS

تُستخدم خاصية position مع القيمة static لعرض العنصر في layer طبقة واحدة مع جميع العناصر الأخري في نفس الصفحة وهي القيمة الأفتراضية.


معلومات حول خاصية position مع القيمة static:

  • وضع عناصر HTML في الحالة الأفتراضية يكون position:static سواء تم كتابة الخاصية للعنصر أو بدون ويمكن تغيير القيمة بلغة CSS.
  • يمكن وضع هوامش حول العناصر من النوع position:static عن طريق خاصية margin أما القيم الأخري يتم عن طريق الخصائص [left-right-top-bottom].
  • أي عنصر في صفحة HTML هو في طبقة واحده وهي الطبقة الأساسية أو الأولي عند أنشاء صفحة HTML وأي عنصر حوله سوف يؤثر عليه في حال تحريكة أو وضع هوامش حولة.
جرّب بنفسك

CSS position static

خاصية position مع القيمة static في لغة CSS.

HTML 
.position 
{
  position: static;
  top: 0;
  padding: 5px;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
جرّب بنفسك

CSS position relative خاصية Position مع القيمة relative في لغة CSS

تُستخدم خاصية position مع القيمة relative لعرض العنصر في layer طبقة جديدة  ولكن عند تحريكه في أي إتجاه يتحرك من مكانه ولن يتحرك من حدود parent container العنصر الأب.


معلومات حول خاصية position مع القيمة relative:

  • يتم إستخدام هذة الخصائص [left-right-top-bottom] لعمل هوامش خارجية للعنصر في حال أستخدام خاصية position مع القيمة relative.
  • يتك إضافة العنصر في طبقة جديدة إذا تم إستخدام خاصية position مع القيمة relative ويكون حر يمكن تحريكة دون التأثير علي العناصر الُحيطة.
  • إذا تم إستخدام خاصية position مع القيمة relative فلن يتسبب ذلك في عمل فجوات في التصميم أو مساحات فارغة لأنه سوف يكون في طبقة منفصلة أعلي العناصر التي في الطبقة الأولي.
جرّب بنفسك

CSS position relative

خاصية position مع القيمة relative في لغة CSS.

HTML 
.position
{
  position:relative;
  top: -50px;
  left:50px;
  padding: 5px;
  width:80%;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
جرّب بنفسك

CSS position absolute خاصية Position مع القيمة absolute في لغة CSS

تُستخدم خاصية position مع القيمة absolute لأضافة العنصر في layer طبقة جديدة  ولكن عند تحريكه في أي إتجاه يتحرك من حدودو الصفحة ويتحرك مع scroll ولا يكون ثابت بعكس fixed.


معلومات حول خاصية position مع القيمة absolute:

  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة absolute هو relative بناء علي أقرب parent أب له (عنصر container الأب)
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة absolute هو حر داخل حدود الصفحة بالكامل يبدأ إحتساب الهوامش من حدود الصفحة ولكن في حالة لم يطبق علي عنصر الأب position بقيمة relative أو بقيمة fixed.
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة absolute وليس له أب له position فأنه يتحرك بناء علي عنصر body وهو العنصر parent الأب بالنسبه له.
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة absolute يكون في طبقة جديدة أعلي الطبقة الطبيعية الأولي ويمكن إعادة ترتيب الطبقة بلغة CSS.
جرّب بنفسك

CSS position relative

خاصية position مع القيمة relative في لغة CSS.

HTML 
.position 
{
  position:absolute;
  top: 0px;
  right:0px;
  padding: 5px;
  width:80%;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
جرّب بنفسك

CSS position fixed خاصية Position مع القيمة fixed في لغة CSS

تُستخدم خاصية position مع القيمة fixed لأضافة العنصر في layer طبقة جديدة  ولكن عند تحريك scroll يظل العنصر ثابت في مكان معين داخل صفحة الويب.


معلومات حول خاصية position مع القيمة fixed:

  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed هو relative بناء علي أقرب parent أب له (عنصر container الأب).
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed يظل دائماً في نفس المكان الذي تم وضعه فيه حتي مع scroll الصفحة لأعلي ولأسفل.
  • لعمل هوامش خارج العنصر  الذي تم تطبيق عليه خاصية position مع القيمة fixed يجب إستخدام خصائص [left-right-top-bottom] بدلاً من margin.
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed لا يترك فجوات في صفحة الويب في مكانه السابق داخل الطبقة السابقة.
جرّب بنفسك

CSS position fixed

خاصية position مع القيمة fixed في لغة CSS.

HTML 
.position 
{
  position:fixed;
  bottom: 0px;
  right:0px;
  padding: 10px;
  width:15%;
  background: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
جرّب بنفسك

CSS position absolute with relative خاصية Position مع القيمة absolute و القيمة relative في لغة CSS

العنصر الذي يتم تطبيق عليه خاصية  position:absolute لو كان بداخل عنصر أخر أب (حاوية) تم تطبيق عليه خاصية position:relative فأنه يتحرك بداية من عنصر الأب وليس من بداية الصفحة.

جرّب بنفسك

CSS position absolute without relative

يتحرك العنصر بناء علي حدود عنصر body إذا كان العنصر الأب ليس له posation:relative في لغة CSS.

HTML 
.child
{
  position:absolute;
  width:50%;
  height:150px;
  background:pink;
  border: 2px dashed #ee5253;
  color:red;
  right:50px;
  top:50px;
  text-align:center;
  vertical-align:middle;
}
جرّب بنفسك
جرّب بنفسك

CSS position absolute with relative

يتحرك العنصر بناء علي حدود عنصر الأب parent إذا كان العنصر الأب له posation:relative في لغة CSS.

HTML 
.child
{
  position:absolute;
  width:50%;
  height:150px;
  background:pink;
  border: 2px dashed #ee5253;
  color:red;
  right:50px;
  top:50px;
  text-align:center;
  vertical-align:middle;
}
جرّب بنفسك

CSS position sticky خاصية Position مع القيمة absolute في لغة CSS

خاصية position مع القيمة sticky في لغة CSS تتحكم في وضعية العنصر بناء علي  تحريك scroll الصفحة من قبل المستخدم وضعية العنصر في الوضع الطبيعي سوف تكون relative وتتحول بعد ذلك إلي fixed.


معلومات حول خاصية position مع القيمة sticky:

  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة sticky يتم وضعة بناء علي سحب scroll من قبل المستخدم.
  • يتم تبديل العنصر  الذي تم تطبيق عليه خاصية position مع القيمة sticky بين relative وبين fixed بناء علي حركة scroll لأعلي ولأسفل.
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة sticky هو relative حتي يتم تحريكة من موضع  scroll الطبيعي.


جرّب بنفسك

CSS Position sticky

خاصية position في لغة CSS.

HTML 
.sticky 
{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
جرّب بنفسك

CSS position use text over image خاصية Position لوضع النص فوق الصورة في لغة CSS

تُستخدم خاصية position مع القيمة fixed لأضافة العنصر في layer طبقة جديدة  ولكن عند تحريك scroll يظل العنصر ثابت في مكان معين داخل صفحة الويب.


معلومات حول خاصية position مع القيمة fixed:

  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed هو relative بناء علي أقرب parent أب له (عنصر container الأب).
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed يظل دائماً في نفس المكان الذي تم وضعه فيه حتي مع scroll الصفحة لأعلي ولأسفل.
  • لعمل هوامش خارج العنصر  الذي تم تطبيق عليه خاصية position مع القيمة fixed يجب إستخدام خصائص [left-right-top-bottom] بدلاً من margin.
  • العنصر الذي تم تطبيق عليه خاصية position مع القيمة fixed لا يترك فجوات في صفحة الويب في مكانه السابق داخل الطبقة السابقة.
جرّب بنفسك

CSS position use text over image

إضافة نص أعلس الصورة عن طريق خاصية position مع القيمة absolute مع إضافة للعنصر الأب position بقيمة relative في لغة CSS.

HTML 
.text
{
  position:absolute;
  top: 35%;
  left: 30%;
  font-size:50px;
  color:white;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات19

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 19 مفهومةأول بطاقة، أول خطوة
01 Position موقع / وضعية
للمراجعة
02 Static ساكن
للمراجعة
03 Absolute مطلق
للمراجعة
04 Fixed ثابت
للمراجعة
05 Sticky لزج / خفيف
للمراجعة
06 Property خاصية
للمراجعة
07 Relative نسبي
للمراجعة
08 Element عنصر
للمراجعة
09 Layout تخطيط
للمراجعة
10 Layer طبقة
للمراجعة
11 Elements عناصر
للمراجعة
12 Propertites خصائص
للمراجعة
13 Values قيم
للمراجعة
14 Scroll تنقل من الأعلي الي الأسفل
للمراجعة
15 Top أعلي
للمراجعة
16 Right يمين
للمراجعة
17 Left يسار
للمراجعة
18 Body جسم المحتوي
للمراجعة
19 Bottom أسفل
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

في ماذا تستخدم خاصية Position ؟

02

ماهي القيمة التي تأخذها خاصية position والتي تجعل جميع ال HTML Elements في الوضع الافتراضي هي تكون كلها بداخل Layer واحدة. ؟

____
03

ماهي القيمة التي تجعل العنصر يكون دائماً في مكان ثابت حتى إذا تم عمل scroll للصفحة.؟

____
04

ماهي القيمة التي تجعل العنصر يتحرك من بداية اول حدود ال body Element ولا يكون ثابت مكان محدد يتحرك مع ال scroll.

____