يوفر CSS خصائص لتحديد الموضع والتعويم تسمح لك بإنشاء تخطيطات عمودية، وتداخل جزء من التخطيط مع جزء آخر، وإنجاز المهام التي غالبًا ما تتطلب لسنوات استخدام جداول متعددة.
الفكرة الأساسية لتحديد الموضع بسيطة، فهي تسمح لك بتحديد المكان الذي يجب أن يظهر فيه مربع العنصر بالنسبة إلى موضعه الطبيعي، أو بالنسبة إلى عنصر أصل، أو عنصر آخر، أو حتى نافذة المتصفح نفسها. من الواضح أن هذه الميزة قوية جدًا ومدهشة. لا ينبغي أن يكون مفاجئًا معرفة أن وكلاء المستخدم يدعمون تحديد المواقع في CSS2 بشكل أفضل بكثير من الجوانب الأخرى.
من ناحية أخرى، تم تقديم العوامات لأول مرة في CSS1 واستندت إلى ميزة أضافتها Netscape في الأيام الأولى للويب. العائمة لا تحدد الموضع تمامًا، ولكنها بالتأكيد ليست تخطيطًا طبيعيًا للتدفق أيضًا. وسنوضح معنى التعويم في فصل لاحق.
كل شيء هو الإطار غالبًا ما يُطلق على عنصر div أو h1 أو p عنصر مستوى الكتلة. وهذا يعني أن هذه العناصر تظهر ككتلة من المحتوى، "مربع الكتلة". في المقابل، تسمى العناصر مثل الامتداد والقوة "العناصر المضمنة" لأن محتواها يظهر داخل سطر، "مربع مضمن".
يمكنك تغيير نوع المربع الذي تم إنشاؤه باستخدام خاصية العرض. هذا يعني أنه يمكنك جعل العناصر المضمنة (مثل العناصر <a>) تتصرف مثل عناصر مستوى الكتلة عن طريق تعيين خاصية العرض على الحظر. يمكنك أيضًا تعيين العرض على لا شيء بحيث لا يحتوي العنصر الذي تم إنشاؤه على مربع على الإطلاق. بهذه الطريقة، لن يعد المربع وكل محتوياته مرئيًا ولا يشغل أي مساحة في المستند.
ولكن في إحدى الحالات، يتم إنشاء عناصر على مستوى الكتلة حتى بدون تعريف واضح. يحدث هذا عند إضافة بعض النص إلى بداية عنصر على مستوى الكتلة (مثل div). حتى لو لم يتم تعريف النص على أنه فقرة، فسيتم التعامل معه على هذا النحو:
![div CSS XHTML XML مثال كود المصدر]()
مثال لكود المصدر
[www.downcodes.com] <ديف>
بعض النص
<p>بعض النصوص الأخرى.</p>
</div>
في هذه الحالة، يُسمى الصندوق صندوق كتلة غير مسمى لأنه غير مرتبط بعنصر محدد.
يحدث شيء مماثل مع أسطر النص لعناصر مستوى الكتلة. لنفترض أن لديك فقرة تحتوي على ثلاثة أسطر من النص. يشكل كل سطر من النص مربعًا غير مسمى. لا يمكنك تطبيق الأنماط مباشرة على الكتل أو مربعات الخطوط غير المسماة لأنه لا يوجد مكان لتطبيق الأنماط (لاحظ أن مربعات الخط والمربعات المضمنة هما مفهومان مختلفان). ومع ذلك، من المفيد أن تفهم أن كل ما تراه على الشاشة يشكل نوعًا من الصناديق.
آلية تحديد المواقع CSS لدى CSS ثلاث آليات تحديد المواقع الأساسية: التدفق الطبيعي، والتعويم، وتحديد المواقع المطلقة.
يتم وضع كافة الصناديق في التدفق الطبيعي ما لم ينص على خلاف ذلك. أي أن موضع العنصر في التدفق العادي يتم تحديده من خلال موضع العنصر في X(HTML).
يتم ترتيب المربعات على مستوى الكتلة واحدًا تلو الآخر من الأعلى إلى الأسفل، ويتم حساب المسافة العمودية بين المربعات من الهوامش الرأسية للمربعات.
يتم ترتيب الصناديق المضمنة أفقيًا على التوالي. يمكن ضبط التباعد بينها باستخدام الحشو الأفقي والحدود والهوامش. ومع ذلك، لا تؤثر الحشوة الرأسية والحدود والهوامش على ارتفاع المربع المضمن. يُطلق على الصندوق الأفقي الذي يتكون من خط ما اسم مربع الخط، ويكون ارتفاع مربع الخط دائمًا مرتفعًا بدرجة كافية لاستيعاب جميع المربعات المضمنة التي يحتوي عليها. ومع ذلك، يمكن أن يؤدي تعيين ارتفاع الصف إلى زيادة ارتفاع هذا المربع.
أدناه، سنشرح الموضع النسبي، والموضع المطلق، والعائم بالتفصيل.
خاصية موضع CSS باستخدام خاصية الموضع يمكننا الاختيار بين 4 أنواع مختلفة من تحديد المواقع، مما يؤثر على كيفية إنشاء مربع العنصر.
معنى قيمة سمة الموضع:
ثابت
يتم إنشاء مربع العنصر بشكل طبيعي. تقوم العناصر على مستوى الكتلة بإنشاء مربع مستطيل كجزء من تدفق المستند، بينما تقوم العناصر المضمنة بإنشاء مربع سطر واحد أو أكثر يتم وضعها داخل العنصر الأصلي الخاص بها.
نسبي
يتم تعويض مربع العنصر بمسافة معينة. يحتفظ العنصر بشكله غير الموضعي وبالمساحة التي كان يشغلها في الأصل.
مطلق
تتم إزالة مربع العنصر بالكامل من تدفق المستند ويتم وضعه بالنسبة إلى الكتلة التي تحتوي عليه. قد تكون الكتلة المحتوية عنصرًا آخر في المستند أو الكتلة المحتوية الأولية. يتم إغلاق المساحة التي كان يشغلها العنصر سابقًا في تدفق المستند العادي، كما لو أن العنصر غير موجود. يقوم العنصر بإنشاء مربع على مستوى الكتلة بعد تحديد موضعه، بغض النظر عن نوع الصندوق الذي تم إنشاؤه في الأصل في التدفق العادي.
مُثَبَّت
يتصرف مربع العنصر مثل ضبط الموضع على مطلق، باستثناء أن الكتلة التي تحتوي عليه هي إطار العرض نفسه.
نصيحة: يعتبر تحديد الموضع النسبي في الواقع جزءًا من نموذج تحديد موضع التدفق الطبيعي، لأن موضع العنصر يتعلق بموضعه في التدفق العادي.
خصائص تحديد المواقع CSS تتيح لك خصائص تحديد موضع CSS إمكانية تحديد موضع العناصر.
وصف العقار
الموضع يضع العنصر في موضع ثابت أو نسبي أو مطلق أو ثابت.
يحدد top الإزاحة بين حد الهامش العلوي لعنصر محدد والحد العلوي للكتلة التي تحتوي عليه.
يحدّد اليمين الإزاحة بين حافة الهامش الأيمن للعنصر الموضوع والحافة اليمنى للكتلة التي تحتوي عليه.
يحدّد الجزء السفلي الإزاحة بين حد الهامش السفلي للعنصر الموجود والحد السفلي للكتلة التي تحتوي عليه.
left يحدد الإزاحة بين حافة الهامش الأيسر للعنصر الموجود والحافة اليسرى للكتلة التي تحتوي عليه.
يضبط overflow ما يحدث عندما يتجاوز محتوى العنصر مساحته.
مقطع يحدد شكل العنصر. يتم قص العنصر في هذا الشكل ثم عرضه.
عمودي محاذاة يضبط المحاذاة الرأسية للعنصر.
يقوم مؤشر z بتعيين ترتيب تراص العناصر.
