تعد CSS Positioning أكثر من مجرد X و Y
لطالما كان وضع CSS جزءًا مهمًا من إنشاء تخطيطات مواقع الويب. حتى مع ظهور تقنيات تخطيط CSS الحديثة مثل Flexbox و CSS Grid ، لا يزال تحديد المواقع يحتل مكانًا مهمًا في أي حقيبة من حيل مصمم الويب.
عند استخدام وضع CSS ، فإن أول شيء ستحتاج إلى القيام به هو إنشاء خاصية CSS للموضع لإعلام المتصفح إذا كنت ستستخدم موضعًا مطلقًا أو نسبيًا لعنصر معين. تحتاج أيضا إلى فهم واضح للفرق بين هذه الخصائص اثنين من المواقع.
في حين أن المطلق والنسبي هما خصائص موضع CSS الأكثر استخدامًا في تصميم الويب ، فهناك في الواقع أربع حالات لخاصية الموقع:
- ثابتة
- مطلق
- نسبيا
- ثابت
ثابت هو الموضع الافتراضي لأي عنصر في صفحة الويب. إذا لم تحدد موضع عنصر ما ، فسيكون ذلك ثابتًا. وهذا يعني أنه سيتم عرضه على الشاشة استنادًا إلى مكان وجوده في مستند HTML وكيفية عرضه داخل التدفق العادي لذلك المستند.
إذا قمت بتطبيق قواعد وضع مثل أعلى أو يسار على عنصر يحتوي على موضع ثابت ، سيتم تجاهل هذه القواعد وسيبقى العنصر حيث يظهر في تدفق المستند العادي. في الحقيقة ، نادرًا ما تحتاج ، في أي وقت ، إلى تعيين عنصر إلى موضع ثابت في CSS لأن هذه هي القيمة الافتراضية.
المطلق المغلق لتحديد المواقع
قد يكون تحديد المواقع المطلق هو أسهل موقف CSS للفهم. ستبدأ بخاصية موضع CSS هذه:
الموقع: مطلقةتوضح هذه القيمة للمستعرض أنه يجب إزالة أي شيء سيتم وضعه من التدفق العادي للمستند ووضعه بدلاً من ذلك في موقع دقيق على الصفحة. يتم حساب ذلك استنادًا إلى أقرب السند غير المستقر في هذا العنصر.
نظرًا لأن عنصرًا تم وضعه تمامًا يتم سحبه من التدفق العادي للمستند ، فلن يؤثر على كيفية وضع العناصر قبله أو بعده في HTML على صفحة الويب.
على سبيل المثال - إذا كان لديك قسم تم وضعه باستخدام قيمة نسبية (سننظر إلى هذه القيمة قريبًا) ، وداخل هذا التقسيم كان لديك فقرة تريد وضع 50 بكسل من أعلى القسم ، سيضيف قيمة موضع "مطلق" إلى تلك الفقرة مع قيمة إزاحة قدرها 50 بكسل في موقع "أعلى" ، مثل هذا.
الموقع: مطلقة العلوي: 50 بكسلعندئذٍ ، سيعرض هذا العنصر المطلق تمامًا 50 بكسل من الجزء العلوي من هذا القسم المتمركز نسبيًا - بغض النظر عن ما يعرضه الآخر في التدفق العادي. استخدم عنصر "positionly" الخاص بك بوضعه في موضعه نسبياً كسياق له وقيمة positing التي تستخدمها نسبية ذلك.
خصائص تحديد المواقع الأربعة المتوفرة لديك هي:
- أعلى
- حق
- الأسفل
- اليسار
يمكنك استخدام إما أعلى أو أسفل (بما أنه لا يمكن وضع العنصر وفقًا لكلا القيمتين) وإما إلى اليمين أو اليسار.
إذا تم تعيين عنصر إلى موضع مطلق ، ولكن ليس هناك أسلاف غير متمركزين بشكل ثابت ، فسيتم وضعه بالنسبة لعنصر الجسم ، وهو أعلى عنصر مستوى للصفحة.
المواقع النسبية
ذكرنا بالفعل المواقع النسبية ، لذلك دعونا ننظر إلى تلك الخاصية الآن.
يستخدم التموضع النسبي نفس خصائص تحديد المواقع الأربع كموضع مطلق ، ولكن بدلاً من تثبيت موضع العنصر على أقرب أقرب موقع غير ثابت ، فإنه يبدأ من حيث سيكون العنصر إذا كان لا يزال في التدفق العادي.
على سبيل المثال ، إذا كان لديك ثلاث فقرات على صفحة الويب الخاصة بك ، والثالث يحتوي على نمط "موضع: نسبي" موضوعة عليه ، فسيتم تقريب الموضع بناءً على موقعه الحالي.
الفقرة 1.
الفقرة 2.
الفقرة 3.
في المثال أعلاه ، سيتم وضع الفقرة الثالثة في الجزء الأيمن من عنصر الحاوية ، ولكن ستظل أقل من الفقرتين الأوليين. سيبقى في التدفق العادي للمستند ، ويتم تعويضه قليلاً. إذا قمت بتغييره إلى الموضع: مطلق ؛ أي شيء يتبعه سيتم عرضه فوقه ، لأنه لن يكون في التدفق العادي للمستند.
غالبًا ما يتم استخدام العناصر الموجودة على صفحة الويب لتحديد قيمة الموضع: نسبيًا مع عدم وجود قيمة تخالف ، مما يعني أن العنصر يظل بالضبط حيث سيظهر في التدفق العادي. ويتم ذلك فقط لإنشاء هذا العنصر كسياق يمكن وضع عناصر أخرى على أساسه. على سبيل المثال ، إذا كان لديك قسم يحيط بموقعك بأكمله بقيمة وصفية من "الحاوية" (وهو سيناريو شائع جدًا في تصميم الويب) ، يمكن تعيين ذلك القسم إلى موضع نسبي بحيث يمكن لأي شيء بداخله أن يستخدم انها سياق تحديد المواقع.
ماذا عن تحديد المواقع الثابتة؟
المواقع الثابتة تشبه إلى حد كبير المواقع المطلقة. يتم حساب موضع العنصر بنفس الطريقة التي يتم بها حساب النموذج المطلق ، ولكن يتم تثبيت العناصر الثابتة في ذلك الموقع ، تمامًا مثل العلامة المائية . كل شيء آخر في الصفحة سيتم تمريره بعد ذلك العنصر.
لاستخدام قيمة الخاصية هذه ، ستقوم بتعيين:
الموقع: ثابتضع في اعتبارك أنه عند إصلاح عنصر في موقعك ، فسوف تتم طباعته في ذلك الموقع عند طباعة صفحة الويب الخاصة بك. على سبيل المثال ، إذا تم إصلاح العنصر في أعلى الصفحة ، فسيظهر أعلى كل صفحة مطبوعة - لأنه ثابت في أعلى الصفحة. يمكنك استخدام أنواع الوسائط لتغيير كيفية عرض الصفحات المطبوعة لعناصر ثابتة:
media screen {h1 # first {position: fixed؛ }}media print {h1 # first {position: static؛ }}المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 1/7/16.