تموضع العناصر في CSS

إن تعلّم موضعة العناصر (Positioning) في لغة CSS أمر مهم لمصممي صفحات الويب، ﻷنها تعدّ من الخصائص المهمة للتحكم بأماكن ومواضع العناصر داخل صفحة الويب.

وبطبيعة الحال لدينا 5 أنواع لموضعة العناصر في CSS وهم على النحو التالي:

  • Static: وهي الحالة الطبيعية والافتراضية، حيث تظهر العناصر كما ينبغي لها أن تظهر بالترتيب التقليدي.
  • Relative: وعند تحديد هذه القيمة، فإنه يتم وضع وتحريك العنصر نسبةً إلى موضعه اﻷصلي (هذا يعني أنه لو كان لدينا عنصر موضوع في المكان “X” فإننا نستطيع تحريكه نسبةً وتيمّنًا بموضعه اﻷصلي “X“).
  • Absolute: يتم هنا وضع وتحريك العنصر نسبةً إلى والده (its parent) الذي يحتويه.
  • Fixed: يتم هنا وضع وتحريك العنصر نسبةً إلى نافذة المتصفح.
  • Sticky: يتم هنا وضع وتحريك العنصر نسبةً إلى عملية التمرير (Scrolling) التي يقوم بها المستخدم.

وﻷن أكثر ما يقع فيه اللغط والتشويش هما Relative وAbsolute فسوف نقوم بإيضاح الفرق بينهما…

الموضع النسبي (Relative)

سُمي كذلك، نظرًا ﻷنه يتموضع ويتحرك نسبةً إلى نفسه هو، لا نسبةً ﻷي شيء آخر؛ وعندما تقوم باختيار القيمة relative لعنصرٍ ما بدون تحديد أيّ من الاتجاهات (top, bottom, left, right) فإنه لن يحدث أي شيء.

ولكن لنفرض أنك قمت بإضافة right:20px فإن العنصر سوف يتحرك بمقدار 20 بكسل مُبتعدًا عن جهة اليمين، وكما سترى فسيتحرّك العنصر من موضعه اﻷصلي الذي كان فيه “أيّ مُبتعدًا عن موضعه اﻷصلي” نحو 20 بكسل من جهة اليمين،  وبدون أن تتأثر العناصر اﻷخرى في الصفحة.

الموضع المطلق (Absolute)

يتمتع الموضع المطلق بإمكانية وضع العنصر بدقة وبالضبط في المكان الذي تريده، ولذلك سُمي مُطلقًا.

ولكن يجب عدم اﻹفراط في استخدامه بكثرة، ﻷنه قد يؤدي إلى مشاكل عديدة في المستقبل عند عمل صيانة للتصميم.

ولكن… خُذّ هذه الملاحظة في عين الاعتبار:

عند تعريف عنصر بالوضع Relative (وكان هذا العنصر أبًا)، وكان يحوي في داخله ابنًا، وكان الابن يتمتع بالوضع Absolute فإن الابن سوف يلتزم ويُحصر (limit) بالحدود التي يمنحها له اﻷب.

وعليه فإن أي عنصر Absolute يتموضع داخل عنصر Relative فإنه سوف يتموضع بصورة مطلقة ضمن ونسبةً إلى المأوى والمسكن الذي يُؤويه.

لنأخذ أمثلة

  • في المثال التالي عنصران يطبقان مبدأ Relative، سترى أن كل واحدٍ يتحرك بمقدار معين، ولا يؤثّر تحرك أحدهما على موضع اﻵخر، كلٌ يتحرك بشكل مستقل:

<div id="first_element">First element</div> 
<div id="second_element">Second element</div>
#first_element {
 position: relative;
 left: 30px; 
top: 70px; 
width: 500px; 
background-color: #fafafa; 
border: solid 3px #ff7347; 
font-size: 24px; 
text-align: center; 
} 
#second_element { position: relative; 
width: 500px; 
background-color: #fafafa; 
border: solid 3px #ff7347; 
font-size: 24px; 
text-align: center; 
}
  • أما في المثال التالي عنصران، اﻷول أب والثاني ابن يسكن داخله؛ لعلك تذكرت الملاحظة التي ذكرناها أعلاه… سوف يلتزم الابن بمعايير العنصر اﻷب:

<div id=”parent”> 
  <div id=”child”></div> 
</div>
#parent
{
position: relative;
width: 500px;
height: 400px;
background-color: #fafafa;
border: solid 3px #9e70ba;
font-size: 24px;
text-align: center;
}

#child {
position: absolute;
right: 40px;
top: 100px;
width: 200px;
height: 200px;
background-color: #fafafa;
border: solid 3px #78e382;
font-size: 24px;
text-align: center;
}

[dzone]