التموضع

لغرض إنشاء تصميم صفحات معقدة؛, ينبغي أن نناقش خاصية position. هذه الخاصية لها العديد من القيم، وهذه القيم من الصعب تذكرها. لنقم بالمرور عليها واحدة، تلو الأخرى. ويفضل أن تضع هذه الصفحة بالتحديد في مفضلتك؛ لتتمكن من الرجوع إليها بسهولة مستقبلًا.

static

.static {
  position: static;
}
<div class="static">

static هي القيمة الافتراضية. العنصر الثابت يمكن اعتباره بدون موضع والعنصر الذي يملك أي قيمة أخرى يمكن اعتباره عنصرًا محددًا بموضع.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}
<div class="relative1">

relative تملك نفس صفات static تقريبًا. إلا إذا قمتَ بإضافة بعض الخصائص الأخرى.

</div>
<div class="relative2">

يمكن إضافة بعض الصفات الأخرى لهذه القيمة، مثل top، right، bottom، و left. هذه الصفات ستجعل العنصر مُعدّلًا عن الوضع الأصلي. أي محتوى آخر لا يمكن تعديله ليملئ أي فراغ يتركه العنصر الأخير.

</div>

fixed

<div class="fixed">

مرحبًا!. أنا عنصر ثابت لا أتحرك.

</div>

نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: relative، وtop، وright، وbottom، وleft.

متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان.

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة.

متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. ألق نظرة على المشكلة هنا.

absolute

قيمة absolute هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة fixed باستثناء أمر واحد وهو .أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body).

هذا مثال بسيط

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}
<div class="relative">

هذا العنصر تم تحديده بواسطة أقرب عنصر له. لو كان هذا العنصر يملك خاصية position: static; فإنه سيتم تحديد موضعه حتما بالنسبة إلى جسم الصفحة.

<div class="absolute">

هذا العنصر يملك خاصية absolute. هذا يعني أنه تم تحديد موقعه نسبة إلى أقرب عنصر له.

</div>
</div>

هذه الأمور صعبة بعض الشيء، ولكنها ضرورية جدًا لتصميم صفحات الويب. في الصفحات القادمة سنستخدم خاصية position في أمثلة واقعية أكثر.

  • Creative Commons License