التموضع

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

static

.static {
  position: static;
}

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

fixed

نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: 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;
}

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