position في لغة CSS؟

السلام عليكم ورحمه الله وبركاته في هذا الدرس سنتعرف على خاصية أكثر من رائعة و تستخدم بشكل كبير في تصاميم المواقع وهي خاصية position و الخصائص الأخرى أولا ماهي خاصية position ؟
خاصية position هي إحدى الخصائص في لغة CSS وتستخدم لتحديد موقع العنصر داخل صفحة الويب. تتعلق هذه الخاصية بموقع العنصر بالنسبة لعنصر آخر في الصفحة، مثل العنصر الأب أو العنصر الشقيق. يمكن استخدام الخاصية position مع خصائص أخرى مثل top و left و bottom و right لتحديد موقع العنصر بشكل دقيق داخل صفحة الويب.

خاصية position في لغة الويب CSS تقبل القيم التالية:

1) static: هذه هي القيمة الافتراضية للخاصية position، وهي لا تؤثر على موقع العنصر داخل صفحة الويب.

2) relative: تحدد هذه القيمة موقع العنصر بالنسبة إلى موقعه الأصلي، ويمكن استخدام خصائص top و left و bottom و right لتحديد موقع العنصر داخل صفحة الويب بشكل دقيق.

مثال:

CSS


div {
    position: relative;
    top: 50px;
    left: 20px;
}

3) absolute: تحدد هذه القيمة موقع العنصر بالنسبة إلى العنصر الأساسي الذي يحتوي عليه. ويمكن استخدام خصائص top و left و bottom و right لتحديد موقع العنصر بشكل دقيق. مثال:

CSS


div {
    position: absolute;
    top: 0;
    left: 0;
}

4) fixed: تحدد هذه القيمة موقع العنصر بالنسبة إلى نافذة المتصفح وليس بالنسبة إلى العنصر الأساسي الذي يحتوي عليه. ويمكن استخدام خصائص top و left و bottom و right لتحديد موقع العنصر بشكل دقيق. مثال:

CSS


div {
    position: fixed;
    top: 0;
    left: 0;
}

5) sticky: تحدد هذه القيمة أن العنصر سوف يظل ثابتًا بموقعه الحالي حتى يصل إلى حافة العنصر الأساسي الذي يحتوي عليه، ثم يبدأ في الالتصاق به. مثال:

CSS


div {
    position: sticky;
    top: 0;
}

في المثال السابق، يتم تحديد خاصية position على عنصر div. ويتم تحديد الخاصية top بقيمة 0، مما يعني أن العنصر سوف يبقى ملتصقًا بالحافة العلوية للعنصر الأساسي الذي يحتوي عليه، ولكنه سيظل ثابتًا في هذا الموقع حتى يصل إلى حافة العنصر الأساسي، ثم يبدأ في الالتصاق به.

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

CSS


div {
    box-shadow: 4px 4px 8px #f45;
}

Top Left...

لخاصية top تستخدم لتحديد المسافة بين الحافة العلوية للعنصر وحافة العنصر الأساسي الذي يحتوي عليه. يمكن استخدام القيم الإيجابية لتحريك العنصر للأعلى، والقيم السالبة لتحريكه للأسفل. مثال:

CSS


div {
    position: relative;
    top: 50px;
}

في هذا المثال، يتم تحديد خاصية position على عنصر div. وتم تحديد الخاصية top بقيمة 50 بكسل، مما يحرك العنصر 50 بكسل للأعلى.

الخاصية left تستخدم لتحديد المسافة بين الحافة اليسرى للعنصر وحافة العنصر الأساسي الذي يحتوي عليه. يمكن استخدام القيم الإيجابية لتحريك العنصر لليمين، والقيم السالبة لتحريكه لليسار. مثال:

CSS


div {
    position: relative;
    left: 20px;
}

في هذا المثال، يتم تحديد خاصية position على عنصر div. وتم تحديد الخاصية left بقيمة 20 بكسل، مما يحرك العنصر 20 بكسل لليمين.

الخاصية bottom تستخدم لتحديد المسافة بين الحافة السفلية للعنصر وحافة العنصر الأساسي الذي يحتوي عليه. يمكن استخدام القيم الإيجابية لتحريك العنصر للأسفل، والقيم السالبة لتحريكه للأعلى. مثال:

CSS


div {
    position: relative;
    bottom: -10px;
}

في هذا المثال، يتم تحديد خاصية position على عنصر div. وتم تحديد الخاصية bottom بقيمة -10 بكسل، مما يحرك العنصر 10 بكسل للأعلى.

الخاصية right تستخدم لتحديد المسافة بين الحافة اليمنى للعنصر وحافة العنصر الأساسي الذي يحتوي عليه. يمكن استخدام القيم الإيجابية لتحريك العنصر لليمين، والقيم السالبة لتحريكه لليسار. مثال:

CSS


div {
    position: relative;
    right: 30px;
}

Example:

إذا كنت تريد تحديد موقع عنصر div بشكل محدد داخل div أساسي

HTML


<style>
    div {
        position: relative;
        right: 30px;
    }
    .main-div {
        position: relative;
        height: 400px;
        width: 600px;
        background-color: #333;
    }
    .inner-div {
        position: absolute;
        top: 50px;
        left: 50px;
        height: 200px;
        width: 300px;
        background-color: #f45;
    }
</style>
<div class="main-div">
    <div class="inner-div"></div>
</div>

في هذا المثال، يتم تحديد خاصية position على العنصر الأساسي main-div مع قيمة relative. ثم يتم تحديد الخاصية position على العنصر الداخلي inner-div مع قيمة absolute ويتم تحديد خصائص top و left بقيمة 50 بكسل لكل منهما. هذا يجعل العنصر الداخلي موجودًا على بعد 50 بكسل من الحافة العلوية و50 بكسل من الحافة اليسرى للعنصر الأساسي main-div.

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