تحديد الموقع الثابت (Fixed)

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

في CSS، يحافظ التموضع الثابت (fixed positioning) على العنصر في نفس المكان على الشاشة، بغض النظر عن مقدار التمرير. عند تعيين position: fixed;، تتم إزالة العنصر من التخطيط العادي، لذا تتجاهله العناصر الأخرى. يظل ثابتاً في نافذة المتصفح، مما يجعله مفيداً للترويسات (headers) أو التذييلات (footers) أو القوائم التي يجب أن تظل مرئية دائماً.

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

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

position: fixed;: يحدد هذا التصريح نظام تموضع العنصر على أنه ثابت (fixed).

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

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

.header {
    position: fixed;
    top: 0;
    left: 0;
}

في هذا المثال، يتم تثبيت العنصر الذي يمتلك الفئة header في الجزء العلوي من نافذة العرض باستخدام position: fixed; و top: 0; و left: 0;.

التحدي

سهل

لقد تم إعطاؤك مستند HTML يحتوي على رأس (<div>) وفقرة (<p>). مهمتك هي استخدام التموضع الثابت لجعل الرأس يبقى في الجزء العلوي من نافذة العرض حتى عند تمرير الصفحة. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة header.
قم بتعيين خاصية position لعنصر .header إلى fixed.
قم بتعيين خاصية top لعنصر .header إلى 0 وخاصية left إلى 0. سيؤدي ذلك إلى وضع الرأس في الزاوية العلوية اليسرى من نافذة العرض.
قم بتعيين خاصية width لعنصر .header إلى 100% لجعله يمتد عبر نافذة العرض بالكامل.
قم بتعيين خاصية background-color لعنصر .header إلى #fcc726 (الأصفر الذهبي) بحيث يكون مرئياً مقابل محتوى الصفحة.
قم بتعيين خاصية text-align إلى center، لجعله يبدو أفضل.

ورقة مرجعية

يحافظ التموضع الثابت (Fixed positioning) على العنصر في نفس المكان على الشاشة بغض النظر عن التمرير. يتم إخراج العنصر من التدفق الطبيعي لتخطيط الصفحة.

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

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

مثال - تثبيت عنصر في الزاوية العلوية اليسرى من نافذة العرض (viewport):

.header {
    position: fixed;
    top: 0;
    left: 0;
}

تحدد خصائص الموضع (top، و right، و bottom، و left) موضع العنصر بالنسبة لنافذة العرض، وتقبل القيم بوحدات البكسل، أو ems، أو النسب المئوية، أو وحدات CSS الأخرى.

جرّب بنفسك

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>