أساسيات تحديد المواقع (Positioning)

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 55 من 76.

في CSS، يُعدّ تحديد الموضع مجموعةً من الخصائص التي تتيح لك التحكم في موضع العناصر على صفحة ويب. افتراضيًا، يتم وضع العناصر وفقًا للتدفق الطبيعي لمستند HTML. ومع ذلك، باستخدام تحديد الموضع في CSS، يمكنك إخراج العناصر من التدفق الطبيعي ووضعها في مواقع محددة بالنسبة إلى العنصر الحاوي لها أو إلى منطقة العرض (المنطقة المرئية من نافذة المتصفح).

هناك عدة قيم لخاصية position، ولكل منها سلوكها الخاص:

static: هذه هي القيمة الافتراضية. يتم وضع العنصر وفقًا للتدفق العادي للمستند. لا يكون لخصائص top وright وbottom وleft أي تأثير.

relative: يتم وضع العنصر بالنسبة إلى موضعه الطبيعي. سيؤدي ضبط خصائص top وright وbottom وleft إلى تحريك العنصر بعيدًا عن موضعه الطبيعي، لكنه يظل يشغل مساحة في التدفق الطبيعي.

absolute: تتم إزالة العنصر من التدفق العادي، ويتم تحديد موضعه بالنسبة إلى أقرب سلف ذي موضع محدد (أي سلف تكون قيمة position لديه مختلفة عن static). إذا لم يتم العثور على سلف ذي موضع محدد، فسيتم تحديد موضعه بالنسبة إلى كتلة الاحتواء الأولية (وهي عادةً إطار العرض).

fixed: تتم إزالة العنصر من التدفق العادي ويتم تحديد موضعه بالنسبة إلى إطار العرض. يظل ثابتًا في مكانه حتى عند تمرير الصفحة.

إليك الصيغة الأساسية لاستخدام الخاصية position:

selector {
    position: value;
}

value: سلوك التموضع المطلوب (مثلًا: static، relative، absolute، fixed، sticky).

التحدي

سهل

لديك مستند HTML يحتوي على قسم رئيسي (<div>) يتضمن قسمًا فرعيًا واحدًا (<div>). مهمتك هي استخدام الخاصية position لتغيير سياق Positioning للعناصر. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل class container. عيّن خاصية position فيه إلى relative. سيؤدي ذلك إلى جعله سلفًا موضوعيًا للعناصر التابعة له.
اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل class box. عيّن خاصية position فيه إلى absolute. سيؤدي ذلك إلى إخراجه من التدفق الطبيعي، ويسمح لك بوضعه بالنسبة إلى أقرب سلف موضوعي له (وهو container).
عيّن خاصية top للعنصر .box إلى 50px وخاصية left إلى 100px. سيؤدي ذلك إلى وضع الصندوق على بُعد 50 بكسل من الأعلى و100 بكسل من اليسار بالنسبة إلى سلفه الموضوعي (وهو container).

جرّب بنفسك

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>