انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #7 من درس: التحكم في طبقات صفحة HTML بلغة CSS

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

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

1 صفوف تعليمية
لغة CSS
8,565 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

العنصر الذي يتم تطبيق عليه خاصية  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;
}
جرّب بنفسك

جميع فقرات هذا الدرس (التحكم في طبقات صفحة HTML بلغة CSS)