تحديد الموقع النسبي (Relative)

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

في CSS، يُعد الموضع النسبي (relative positioning) نظام تموضع يسمح لك بوضع عنصر بالنسبة لموقعه الطبيعي في تدفق المستند. عندما يتم تعيين عنصر على position: relative;، فإنه يظل في التدفق الطبيعي، ولكن يمكنك بعد ذلك استخدام خصائص top و right و bottom و left لإزاحته عن موضعه الأصلي.

إليك الصيغة الأساسية لاستخدام التموضع النسبي (relative positioning):

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: يقوم هذا التصريح بتعيين مخطط تموضع العنصر إلى نسبي (relative).
top, right, bottom, left: تحدد هذه الخصائص إزاحة العنصر عن موضعه الطبيعي. يمكنك استخدام قيم موجبة أو سالبة، محددة بالبكسل (px)، أو الـ ems (em)، أو النسب المئوية (%)، أو وحدات CSS صالحة أخرى.

على سبيل المثال:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

في هذا المثال، سيتم وضع العنصر الذي يحمل الفئة box على بُعد 20 بكسل للأسفل و30 بكسل إلى اليمين من موضعه الطبيعي في تدفق المستند. سيتم الحفاظ على المساحة التي كان يشغلها في الأصل، ولن تتدفق العناصر الأخرى إلى تلك المساحة.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسم (<div>) يضم ثلاثة أقسام فرعية (<div>) تحمل الفئات box1 و box2 و box3. مهمتك هي استخدام تحديد المواقع النسبي لتحريك العنصر box2. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة box2.
قم بتعيين خاصية position للعنصر .box2 لتكون relative.
قم بتعيين خاصية top للعنصر .box2 لتكون 20px وخاصية left لتكون 40px. سيؤدي ذلك إلى تحريك المربع بمقدار 20 بكسل للأسفل و 40 بكسل لليمين من موضعه الطبيعي.

ورقة مرجعية

يسمح لك تحديد الموضع النسبي (Relative positioning) بوضع عنصر بالنسبة إلى موضعه الطبيعي في تدفق المستند باستخدام position: relative;:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

يبقى العنصر في التدفق الطبيعي، ولكن يمكنك إزاحته باستخدام خصائص top و right و bottom و left. يتم الحفاظ على المساحة الأصلية.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

يؤدي هذا إلى تحريك العنصر بمقدار 20 بكسل للأسفل و 30 بكسل لليمين من موضعه الطبيعي.

جرّب بنفسك

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>