CSSمواقع العناصر

مكان ظهور العنصر

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

في هذا الدرس ستتعلم كيف تحدد مواقع ظهور العناصر سواء بالنسبة للصفحة نفسها و بالنسبة للعناصر الأخرى الموضوعة فيها.

تحديد مكان ظهور العنصر

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

أسلوب الظهور

الخاصية position يمكن تمرير إحدى القيم التالية لها لتحديد أسلوب ظهور العنصر.

موقع الظهور

فيما يلي الخصائص التي يمكنك استخدامها لتحديد موقع ظهور العنصر.

إظهار العنصر في مكانه الأساسي

في المثال التالي قمنا بإظهار العنصر بأسلوب static و بالتالي فإنه سيظهر في موقعه الأساسي في الصفحة.

div {
    position: static;
}

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

div {
    position: static;
    top: 20px;
    left: 30px;
}

تحديد موقع العنصر بأسلوب relative

الخاصية position: relative; تستخدم لتحديد موقع العنصر نسبةً للموقع الأساسي الذي يكون موجود فيه في الصفحة.

في المثال التالي قمنا بإظهار العنصر بأسلوب relative مع تحديد أن موقع سيكون بعيد عن موقع ظهوره الأساسي من اليسار بمقدار 20 بكسل.

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

مشكلة تداخل العناصر

في المثال التالي لاحظ كيف أن إبعاد العنصر من الأعلى بشكل نسبي عن موقعه الأصلي أدى لجعله يظهر فوق العنصر الموضوع بعده في الصفحة.

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

حل مشكلة تداخل العناصر

في المثال التالي قمنا بإبعاد العنصر من الأعلى و كذلك أضفنا له margin-bottom لكي لا يتداخل محتواه مع محتوى العنصر الموضوع بعده.

div {
    position: relative;
    left: 20px;
    top: 25px;
    margin-bottom: 30px;
}

تحديد موقع العنصر بأسلوب absolute

تحديد موقع العنصر بأسلوب absolute يعني أن موقعه سيتحدد نسبةً لأقرب عنصر موجود بداخله يظهر بشكل نسبي سواء relative أو fixed أو sticky.

في المثال التالي قمنا بجعل العنصر الأب يظهر بأسلوب relative أما العنصر الإبن فجعلناه يظهر بأسلوب absolute مع تحديد أن موقعه سيكون يمين العنصر الأب بمقدار 10 بكسل و أسفله بمقدار 10 بكسل أيضاً.

.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

تحديد موقع العنصر بأسلوب fixed

تحديد موقع العنصر بأسلوب fixed يعني أن موقعه سيتحدد بالنسبة للمتصفح.

في المثال التالي قمنا بجعل العنصر يظهر بأسلوب fixed لكي يظل ثابتاً في الصفحة مع تحديد أن موقعه سيكون في أسفلها و من الناحية اليمنى.

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

تحديد موقع العنصر بأسلوب sticky

تحديد موقع العنصر بأسلوب sticky يعني أن موقعه سيظل في مكانه الأساسي و لكنه سيثبت في مكان محدد في المتصفح عند النزول في شريط التمرير العمودي.

في المثال التالي قمنا بجعل العنصر يظهر بأسلوب sticky لكي يثبت في أعلى الصفحة عندما يلامس حدود الصفحة من الأعلى.

div {
    position: sticky;
    top: 0;
}

في المثال التالي قمنا بجعل العنصر يظهر بأسلوب sticky لكي يثبت في أعلى الصفحة قبل ملامسة حدودها من الأعلى بمقدار 10 بكسل.

div {
    position: sticky;
    top: 10px;
}

تحديد أولوية ظهور العناصر

عند تغيير مواقع العناصر بواسطة الخاصية position فإنه بحسب المكان الذي تم تعريفها فيه يتم إعطاءها أولية الظهور في الأعلى إذا تداخلت مع بعضها.

أولوية الظهور يمكنك تحديدها بواسطة الخاصية z-index و إعطاءها رقم يمثل أولوية الظهور، و بالطبع العنصر صاحب الرقم الأعلى هو الذي سيظهر في الأعلى.

لاحظ كيف أن ترتيب العناصر فوق بعضها يختلف بحسب أولوية الظهور المعطاة لهم فقط.

في المثال التالي قمنا بتعريف ثلاث مربعات بجانب بعضها مع جعلها مع تحديد أولية الظهور لكل واحد منهم.

.blue-box {
    z-index: 1;
}

.green-box {
    z-index: 2;
}

.pink-box {
    z-index: 3;
}