CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

4433

المواضيع

24
الشروحات chevron_left CSS Position chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

position:value;
CSS position values

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

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.

.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.

.position
{
  position:relative;
  top: -50px;
  left:50px;
  padding: 5px;
  width:80%;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
هام
لاحظ عند تحريك العنصر في حالة إستخدام خاصية position مع القيمة relative فأنه يتحرك من مكانه وليس له علاقه بعنصر الأب parent أو container.

</> 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.

.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.

.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.

.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.

.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.

.sticky 
{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #48dbfb;
  border: 2px solid blue;
  color:blue;
}
هام
يجب علي الأقل إستخدام خاصية واحده من هذة الخصائص [ top, right, bottom , left ] لتعمل خاصية position مع القيمة sticky بشكل صحيح في لغة CSS.

</> 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.

.text
{
  position:absolute;
  top: 35%;
  left: 30%;
  font-size:50px;
  color:white;
}
مصطلحات الدرس
Position
Position

موقع / وضعية

Static
Static

ساكن

Absolute
Absolute

مطلق

Fixed
Fixed

ثابت

Sticky
Sticky

لزج / خفيف

Property
Property

خاصية

Relative
Relative

نسبي

Element
Element

عنصر

Layout
Layout

تخطيط

Layer
Layer

طبقة

Elements
Elements

عناصر

Propertites
Propertites

خصائص

Values
Values

قيم

Scroll
Scroll

تنقل من الأعلي الي الأسفل

Top
Top

أعلي

Right
Right

يمين

Left
Left

يسار

Body
Body

جسم المحتوي

Bottom
Bottom

أسفل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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