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

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

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

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

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

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

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

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

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

selector {
    position: value;
}

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

التحدي

سهل

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

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

ورقة مرجعية

تتحكم خاصية position في كيفية تموضع العناصر على صفحة الويب:

selector {
    position: value;
}

قيم التموضع:

static: التموضع الافتراضي في تدفق المستند الطبيعي
relative: يتموضع بالنسبة لموقعه الطبيعي، ولا يزال يشغل مساحة في التدفق
absolute: يُزال من التدفق الطبيعي، ويتموضع بالنسبة لأقرب عنصر سلف (ancestor) له تموضع محدد
fixed: يُزال من التدفق الطبيعي، ويتموضع بالنسبة لمنطقة العرض (viewport)، ويبقى ثابتاً عند التمرير

استخدم خصائص top، و right، و bottom، و left لضبط التموضع (باستثناء static).

جرّب بنفسك

<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>