CSS Position
التحكم في طبقات صفحة HTML بلغة CSS
سوف تتعلم في هذا الدرس كيفية عرض عناصر HTML علي المتصفح وكيف يمكن تغيير الوضع الأفتراضي إلي ثبات العنصر مع تحريك scroll وما هي الطبقات داخل صفحة الويب في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
هام
</>
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;
}
هام
</>
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;
}
موقع / وضعية
ساكن
مطلق
ثابت
لزج / خفيف
خاصية
نسبي
عنصر
تخطيط
طبقة
عناصر
خصائص
قيم
تنقل من الأعلي الي الأسفل
أعلي
يمين
يسار
جسم المحتوي
أسفل
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
