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

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

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

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

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

position: relative;: يعيّن هذا التصريح مخطط تموضع العنصر إلى نسبي.
top، right، bottom، left: تحدد هذه الخصائص إزاحة العنصر من موضعه الطبيعي. يمكنك استخدام قيم موجبة أو سالبة، محددة بالبكسل (px) أو وحدات em (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 بكسل إلى اليمين من موضعه الطبيعي.

جرّب بنفسك

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