CSS تموضع المحتوى

التّموضُع المُطلق و النّسبي و الثّابت

آخر تحيين: 05-01-2015

تصميم ديزاين كامل للموقع CSS float


بالإضافة إلى float و display. لدينا خاصّية أخرى مُهمّة لتحديد تَموضُع الوسوم و هي position . إذ تُتيح لنا تحديد موقع الوسم المعني بدقّة متناهية . و خاصّة عندما تستعين بالخاصيات الأربع الأخرى : top , right, bottom, left . أقول خاصيات و ليس قيم كالتي تعاملنا معها سابقا . أمّا الخاصية position فلديها ثلاث قيم :

  • fixed : تقوم بتثبيت الوسم على نافذة المتصفح . إذ يبقى محتواه في مكانه مهما نزلنا أسفل الصفحة
  • relative : تحديد موضع الوسم بالنّسبة لوضعيّته العادية
  • absolute : تتيح لنا تحديد موقع الوسم نسبة إلى الوسم الأب الذي طبقنا عليه أيضاً الخاصية position

fixed : تثبيت الوسم

تتيح لنا القيمة fixed بتثبيت المحتوى على صفحة المتصفح . و بإضافة بعض الخاصيات الأربع الأخرى ، يمكننا التحديد الدقيق لمكان التثبيت .



مثال :

p.fixe
{
  position: fixed;
  top: 25px;
  right: 300px;
}
مشاهدة النتيجة

relative : التموضع النسبي

تمكننا هذه القيمة من تحريك الوسم و و تحديد موضعه النهائي بدءا من المكان الأصلي الذي يتواجد فيه . أنظر الصورة أسفله :



عند تحريك الوسم ، احتفظ بمكانه شاغرا .

.pos-relative
{
  position: relative;
  top: 25px;
  right: 30px;
}
مشاهدة النتيجة

absolute

انتبهوا عند استعمال القيمة absolute ، فتحديد الموضع النهائي للوسم يتم حسب حالتين :

الحالة الأولى

ـ إما بدءاً من نقطة الَمعلَم(0,0) أي أعلى يسار الصفحة . كما رأينا في القيمة fixed .و من هنا نقوم بوضعه أينما نريد بتحديد قيم الخاصيات الأربع : top, right, left, bottom. مثال :

.parent
{
   position: absolute;
   top: 200px;
   right: 50px;
}
مشاهدة النتيجة

الحالة الثانية

ـ أو يكون الَمعلَم هو أعلى يسار الوسم الأب ، إذا كان هذا الأخير يستفيد هو أيضا من الخاصية position .

.parent  /* الأب */
{
   position: absolute;
   top: 200px;
   right: 50px;
}
.child  /* الإبن */
{
   position: absolute;
   top: 25px;
   left: 30px;
}
مشاهدة النتيجة


و بهذا نكون أنهينا هذا الفصل . لديكم الآن الأدوات الضرورية و الهامة للبدء في مشروع إنشاء موقعكم . و هذا ما سنقوم به في الفصل الموالي
لا تقلقوا إن لم تتذكّروا كل الخاصيات و الوسوم التي رأيناها . هذا شيء طبيعي ، مع قليل من التطبيق و قليل من الوقت ، ستترسّخ في أذهانكم بكل سلاسة . كما يمكنكم مشاركتنا أي استفسار أو ملاحظة في المنتدى المخصص بلغتي HTML و CSS .