CSS: استخدام position وأنواعه

تُعتبر خاصية position في CSS من الخواص الأساسية التي تُستخدم للتحكم في موضع العناصر داخل صفحة الويب. تُتيح هذه الخاصية للمطورين القدرة على تحديد كيفية تموضع العناصر بطرق مختلفة بناءً على احتياجات التصميم. تختلف الأنواع المتاحة من الخاصية position، وكل نوع يمكن أن يوفر سلوكًا وتموضعًا مختلفًا للعناصر.

أنواع position في CSS

هناك خمسة أنواع رئيسية لخاصة position في CSS، وهي: static، relative، absolute، fixed، وsticky. كل نوع من هذه الأنواع له سلوك فريد يمكن أن يؤثر على كيفية عرض العناصر على الصفحة.

النوع الأول: Static

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

.static-box {
            position: static;
            background-color: lightgray;
            width: 200px;
            height: 100px;
            margin: 10px;
        }
    


    <div class=\"static-box\">مربع Static</div>

النوع الثاني: Relative

يُتيح النوع relative تحريك العنصر بالنسبة إلى موضعه الأصلي في التدفق الطبيعي للصفحة. عند استخدام هذه الخاصية، يمكن استخدام الخصائص الأخرى مثل top وleft لتحريك العنصر من موضعه الأصلي دون أن يؤثر ذلك على موضع العناصر الأخرى.

.relative-box {
            position: relative;
            top: 20px;
            left: 30px;
            background-color: lightcoral;
            width: 200px;
            height: 100px;
            margin: 10px;
        }
    


    <div class=\"relative-box\">مربع Relative</div>

النوع الثالث: Absolute

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

.container {
            position: relative;
            width: 400px;
            height: 200px;
            background-color: lightblue;
        }

        .absolute-box {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: lightgreen;
            width: 100px;
            height: 50px;
        }
    


    <div class=\"container\">
        <div class=\"absolute-box\">مربع Absolute</div>
    </div>

النوع الرابع: Fixed

يتم استخدام خاصية fixed لتموضع العناصر بالنسبة إلى نافذة المتصفح. يظل العنصر في موضعه المحدد حتى عند التمرير في الصفحة. هذه الخاصية مفيدة للعناصر التي نريدها أن تبقى مرئية دائماً مثل أشرطة التنقل.

.fixed-box {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: palevioletred;
            width: 150px;
            height: 50px;
        }
    


    <div class=\"fixed-box\">مربع Fixed</div>

النوع الخامس: Sticky

يُعتبر النوع sticky مزيجًا بين relative وfixed. يبقى العنصر في موضعه الطبيعي في التدفق حتى يتم الوصول إلى موضع معين أثناء التمرير، حيث يصبح مثبتًا في ذلك الموضع. يمكن استخدام هذه الخاصية للعناوين التي نريدها أن تبقى مرئية عند التمرير إلى قسم معين.

.sticky-box {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            background-color: lightgoldenrodyellow;
            width: 100%;
            padding: 10px;
        }
    


    <div class=\"sticky-box\">مربع Sticky</div>
    <div style=\"height: 1000px\">
        محتوى طويل للتمرير
    </div>

باستخدام هذه الأنواع المختلفة من خاصية position، يمكننا تحقيق تصميمات مرنة ومتنوعة تلبي احتياجات الموقع. من المهم فهم كيفية عمل كل نوع لتحقيق أفضل نتائج في التصميم.