تحديد الموقع المطلق (Absolute)

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

في CSS، يتيح لك التمركز المطلق (absolute positioning) وضع عنصر في المكان الذي تريده بالضبط داخل الحاوية الخاصة به.

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

إليك الصيغة الأساسية لاستخدام التموضع المطلق (absolute positioning):

.parent {
    position: relative; /* اجعل العنصر الأب سلفاً متموضعاً */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: محدد CSS الذي يستهدف العنصر الأب. تعيين position: relative; يسمح بالعناصر التابعة ذات الموضع المطلق.

.child: محدد CSS الذي يستهدف العنصر الذي تريد تحديد موضعه بشكل مطلق.

position: absolute;: يحدد هذا التصريح نظام تموضع العنصر ليكون مطلقاً، مما يخرجه من التدفق الطبيعي للمستند.

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

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

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

في هذا المثال، تم تعيين العنصر .parent كعنصر سلف متموضع باستخدام position: relative;. يتم تموضع العنصر .child بشكل مطلق باستخدام position: absolute;، وتم تعيين موضعه ليكون على بُعد 50 بكسل من الأعلى و 100 بكسل من يسار أقرب سلف متموضع له (العنصر .parent).

التحدي

سهل

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

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة parent. قم بتعيين خاصية position الخاصة به إلى relative لجعله سلفاً متموضعاً (positioned ancestor).
اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة box2.
قم بتعيين خاصية position للعنصر .box2 إلى absolute.
قم بتعيين خاصية top للعنصر .box2 إلى 30px وخاصية right إلى 20px. سيؤدي ذلك إلى وضع المربع على بُعد 30 بكسل من الأعلى و 20 بكسل من يمين سلفه المتموضع (الـ parent).

ورقة مرجعية

يضع التموضع المطلق (Absolute positioning) العنصر في المكان الذي تريده بالضبط داخل الحاوية الخاصة به. يتم إزالة العنصر من تدفق التنسيق العادي ويقوم بتموضع نفسه بناءً على أقرب سلف متموضع (positioned ancestor).

الصيغة الأساسية:

.parent {
    position: relative; /* اجعل العنصر الأب سلفاً متموضعاً */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

مثال:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

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

جرّب بنفسك

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>