❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • مكان ظهور العنصر
  • تحديد مكان ظهور العنصر
  • إظهار العنصر في مكانه الأساسي
  • تحديد موقع العنصر بأسلوب relative
  • تحديد موقع العنصر بأسلوب absolute
  • تحديد موقع العنصر بأسلوب fixed
  • تحديد موقع العنصر بأسلوب sticky
  • تحديد أولوية ظهور العناصر

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

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

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

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

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


أسلوب الظهور

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

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

موقع الظهور

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

الخاصية معناها
top لتحديد كم يبعد العنصر من الجهة العلوية.
bottom لتحديد كم يبعد العنصر من الجهة السفلية.
right لتحديد كم يبعد العنصر من الجهة اليمنى.
left لتحديد كم يبعد العنصر من الجهة اليسرى.

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

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

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

مثال

div {
position: static;
}
div { position: static; }
جرب الكود

معلومة تقنية

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

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


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

مثال

div {
position: static;
top: 20px;
left: 30px;
}
div { position: static; top: 20px; left: 30px; }
جرب الكود

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

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


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

مثال

div {
position: relative;
left: 20px;
}
div { position: relative; left: 20px; }
جرب الكود

عند إزاحة العنصر عن موقعه الأساسي فإنه قد يغطي العناصر الأخرى الموجودة بقربه فتضطر لإضافة margin أو padding له أو للعنصر الذي يتداخل فيه لحل هذه المشكلة.


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

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

مثال

div {
position: relative;
left: 20px;
top: 25px;
}
div { position: relative; left: 20px; top: 25px; }
جرب الكود

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

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

مثال

div {
position: relative;
left: 20px;
top: 25px;
margin-bottom: 30px;
}
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;
}
.parent { position: relative; } .child { position: absolute; bottom: 10px; right: 10px; }
جرب الكود

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

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


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

مثال

div {
position: fixed;
bottom: 0;
right: 0;
}
div { position: fixed; bottom: 0; right: 0; }
جرب الكود

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

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


القيمة sticky ليست مدعومة بشكل رسمي في متصفح Opera و لذلك عليك إضافة القيمة -webkit-sticky أيضاً إذا أردتها أن تعمل فيه.


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

مثال

div {
position: sticky;
top: 0;
}
div { position: sticky; top: 0; }
جرب الكود

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

مثال

div {
position: sticky;
top: 10px;
}
div { position: sticky; top: 10px; }
جرب الكود

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

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

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

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

z-index: 1
z-index: 2
z-index: 3
z-index: 1
z-index: 3
z-index: 2

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

مثال

.blue-box {
z-index: 1;
}
.green-box {
z-index: 2;
}
.pink-box {
z-index: 3;
}
.blue-box { z-index: 1; } .green-box { z-index: 2; } .pink-box { z-index: 3; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق