كيف يعمل التموضع في CSS وFlexbox؟ شرح عملي مع أمثلة واضحة

7 min read Aldawsari
دقائق القراءة: 7

مقدمة: لماذا يُعد التموضع في CSS من أكثر الأجزاء أهمية؟

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

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

شرح عملي لخصائص التموضع في CSS وFlexbox مع أمثلة برمجية

ما هي خاصية position في CSS؟

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

هناك خمسة أنواع أساسية من التموضع في CSS:

  • static
  • relative
  • absolute
  • fixed
  • sticky

لنستعرضها واحدة تلو الأخرى.

التموضع الثابت static في CSS

النوع static هو الوضع الافتراضي لأي عنصر في الصفحة. في هذا الوضع، يتحرك العنصر وفق التدفق الطبيعي للمستند، أي أن العناصر تظهر حسب ترتيبها في الشيفرة.

مثال على التموضع الثابت static في CSS داخل الصفحة

في المثال التالي، ستلاحظ أن جميع العناصر تظهر بحسب ترتيبها داخل المستند دون أي إزاحة إضافية:

/* Static Positioning */
.parent {
  padding: 5px;
  position: static;
  background-color: #00AAFF;
  width: 40%;
}

.child-one {
  position: static;
  background-color: rgb(116, 255, 116);
}

.child-two {
  position: static;
  background-color: rgb(248, 117, 117);
}

.child-three {
  position: static;
  background-color: rgb(255, 116, 232);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Position and Flexbox</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="parent">
    Parent
    <div class="child-one">One</div>
    <div class="child-two">Two</div>
    <div class="child-three">Three</div>
  </div>
</body>
</html>

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

التموضع النسبي relative في CSS

يعمل التموضع النسبي relative بشكل قريب جداً من static، لكن مع ميزة مهمة: يمكنك تحريك العنصر باستخدام الخصائص top وbottom وleft وright.

/* Relative Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
}

.child-one {
  position: relative;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

عرض مثال التموضع النسبي relative في CSS بدون إزاحة

في هذا المثال لن ترى فرقاً بصرياً واضحاً، لأن العنصر لم يُزح بعد. لكن عند إضافة قيمة إلى top أو غيرها، يبدأ تأثير relative بالظهور:

/* Relative Positioning with Top, Bottom, Left and Right */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
}

.child-one {
  position: relative;
  top: 10px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

هنا تم دفع العنصر child-one للأسفل بمقدار 10px باستخدام top.

مثال على تحريك عنصر باستخدام position relative وtop في CSS

النتيجة أن العنصر قد يتداخل مع العناصر التالية له، لأن موضعه المرئي تغير بينما ما يزال يحتفظ بمساحته الأصلية في التخطيط. هذه نقطة مهمة يجب فهمها عند استخدام relative.

متى يُستخدم relative؟

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

التموضع المطلق absolute في CSS

التموضع absolute يُخرج العنصر بالكامل من التدفق الطبيعي للمستند. وهذا يعني أن العناصر الأخرى تتصرف وكأن هذا العنصر غير موجود.

عند استخدام absolute مع top أو left أو right أو bottom، يتم تحديد موضع العنصر نسبةً إلى أقرب عنصر أب يملك تموضعاً غير افتراضي، مثل relative أو absolute.

/* Absolute Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
  position: static;
}

.child-one {
  position: absolute;
  top: 0px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

مثال يوضح سلوك position absolute عندما يكون العنصر الأب static

عندما يكون الأب على static، فإن العنصر المطلق التموضع قد يُحسب بالنسبة للمستند أو لأقرب حاوية مهيأة للتموضع.

إذا جعلنا العنصر الأب نفسه absolute:

/* Absolute Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
  position: absolute;
  top: 0px;
}

.child-one {
  position: absolute;
  top: 0px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

تداخل العناصر عند استخدام position absolute للأب والابن في CSS

لكن الاستخدام الأكثر عملية يكون عندما يكون الأب relative والابن absolute:

/* Absolute Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
  position: relative;
  top: 0px;
}

.child-one {
  position: absolute;
  top: 0px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

أفضل استخدام للتموضع absolute داخل عنصر أب relative في CSS

في هذه الحالة، يصبح child-one متمركزاً بالنسبة إلى العنصر الأب وليس بالنسبة إلى الصفحة كلها. وهذا هو الاستخدام الشائع في النوافذ المنبثقة، والأيقونات داخل البطاقات، والشارات الصغيرة، والعناصر المركبة.

أهم فائدة عملية من absolute

إذا أردت تموضع عنصر داخل بطاقة أو حاوية محددة بدقة، فاجعل الحاوية position: relative والعنصر الداخلي position: absolute.

التموضع الثابت fixed في CSS

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

/* Fixed Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
  position: relative;
  top: 0px;
  height: 1000px;
}

.child-one {
  position: fixed;
  top: 0px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

مثال على التموضع fixed في CSS لعنصر ثابت أثناء التمرير

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

  • الأزرار العائمة.
  • أزرار العودة إلى الأعلى.
  • الشريط الجانبي الثابت.
  • تنبيهات الواجهة التي يجب أن تظل مرئية.

التموضع اللاصق sticky في CSS

يمكن اعتبار sticky مزيجاً بين relative وfixed. في البداية يتصرف العنصر بشكل طبيعي، ولكن عند الوصول إلى حد معين أثناء التمرير، يلتصق بمكان محدد مثل أعلى الصفحة.

/* Sticky Positioning */
.parent {
  padding: 5px;
  background-color: #00AAFF;
  width: 40%;
  position: relative;
  top: 0px;
  height: 1000px;
}

.child-one {
  position: sticky;
  top: 0px;
  background-color: rgb(116, 255, 116);
}

.child-two {
  background-color: rgb(248, 117, 117);
}

.child-three {
  background-color: rgb(255, 116, 232);
}

شرح التموضع sticky في CSS لعنصر يلتصق أثناء التمرير

من أبرز استخداماته:

  • أشرطة التنقل.
  • العناوين اللاصقة داخل الصفحات الطويلة.
  • الفلاتر الجانبية في صفحات المتاجر.

ملخص سريع لأنواع CSS Position

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

ما هو Flexbox ولماذا تحتاجه؟

Flexbox هو نظام تخطيط في CSS صُمم لتسهيل ترتيب العناصر داخل الحاويات، سواء أفقياً أو عمودياً، ومن دون الاعتماد على أساليب قديمة مثل float.

إذا كانت العناصر تظهر بشكل متتابع عمودياً بحكم التدفق الطبيعي للصفحة، فإن Flexbox يمنحك تحكماً مباشراً في توزيعها، ومحاذاتها، وتحديد المسافات بينها.

ترتيب العناصر قبل استخدام Flexbox في CSS

وعندما تريد وضع العناصر بجانب بعضها أفقياً، يصبح Flexbox هو الحل الأمثل:

ترتيب العناصر أفقياً باستخدام Flexbox في CSS

كيفية البدء مع Flexbox

لنبدأ ببنية بسيطة: عنصر أب يحتوي على ثلاثة عناصر داخلية.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Position and Flexbox</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="parent">
    <div class="child-one"></div>
    <div class="child-two"></div>
    <div class="child-three"></div>
  </div>
</body>
</html>
/* Flexbox container */
.parent {
  background-color: #00AAFF;
  width: 300px;
  height: 300px;
  display: flex;
}

.child-one {
  background-color: rgb(116, 255, 116);
  width: 300px;
  height: 300px;
}

.child-two {
  background-color: rgb(248, 117, 117);
  width: 300px;
  height: 300px;
}

.child-three {
  background-color: rgb(255, 116, 232);
  width: 300px;
  height: 300px;
}

بمجرد إضافة display: flex إلى العنصر الأب، تتحول العناصر الداخلية إلى عناصر مرنة flex items.

حاوية flex تحتوي على ثلاثة عناصر ملونة في CSS

أهم خصائص Flexbox لترتيب العناصر

أولاً: الخاصية flex-direction

تحدد هذه الخاصية اتجاه توزيع العناصر داخل الحاوية.

  • row: لترتيب العناصر أفقياً.
  • column: لترتيب العناصر عمودياً.
  • row-reverse: ترتيب أفقي مع عكس التسلسل.
  • column-reverse: ترتيب عمودي مع عكس التسلسل.

مثال على row:

توزيع العناصر أفقياً باستخدام flex-direction row

مثال على column:

توزيع العناصر عمودياً باستخدام flex-direction column

مثال على row-reverse:

عكس ترتيب العناصر أفقياً باستخدام flex-direction row-reverse

مثال على column-reverse:

عكس ترتيب العناصر عمودياً باستخدام flex-direction column-reverse

ثانياً: الخاصية justify-content

تتحكم justify-content في محاذاة العناصر على المحور الرئيسي، والذي يكون أفقياً غالباً إذا كان الاتجاه row.

  • center: توسيط العناصر.
  • flex-start: وضع العناصر في بداية السطر.
  • flex-end: وضع العناصر في نهاية السطر.
  • space-around: مسافات حول العناصر.
  • space-between: مسافات بين العناصر فقط.
  • space-evenly: توزيع متساوٍ للمسافات داخل الحاوية وخارج العناصر.

مثال على center:

توسيط العناصر أفقياً باستخدام justify-content center

مثال على flex-start:

محاذاة العناصر إلى بداية الحاوية باستخدام justify-content flex-start

مثال على flex-end:

محاذاة العناصر إلى نهاية الحاوية باستخدام justify-content flex-end

مثال على space-around:

توزيع المسافات حول العناصر باستخدام justify-content space-around

مثال على space-between:

توزيع المسافات بين العناصر باستخدام justify-content space-between

مثال على space-evenly:

توزيع متساوٍ للمسافات باستخدام justify-content space-evenly

ثالثاً: الخاصية align-items

تُستخدم align-items لمحاذاة العناصر على المحور العمودي داخل الحاوية، خاصة عندما يكون للحاوية ارتفاع واضح.

  • center: توسيط العناصر عمودياً.
  • flex-start: وضع العناصر في أعلى الحاوية.
  • flex-end: وضع العناصر في أسفل الحاوية.

مثال على center:

توسيط العناصر عمودياً داخل حاوية flex باستخدام align-items center

مثال على flex-start:

محاذاة العناصر إلى أعلى الحاوية باستخدام align-items flex-start

مثال على flex-end:

محاذاة العناصر إلى أسفل الحاوية باستخدام align-items flex-end

كيف تضع العناصر في منتصف الشاشة باستخدام Flexbox؟

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

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

توسيط العناصر أفقياً وعمودياً باستخدام Flexbox في CSS

هذه الطريقة شائعة جداً في:

  • شاشات تسجيل الدخول.
  • النوافذ المنبثقة.
  • رسائل التحميل.
  • تصميم البطاقات المتمركزة.

أفضل ممارسات عند استخدام CSS Position وFlexbox

  1. استخدم Flexbox أولاً عندما يكون المطلوب مجرد محاذاة وتنظيم للعناصر.
  2. استخدم absolute فقط عندما تحتاج تموضعاً دقيقاً داخل حاوية محددة.
  3. اجعل العنصر الأب relative إذا أردت أن يتبع العنصر الابن absolute حدوده.
  4. تجنب الإفراط في استخدام fixed حتى لا تؤثر العناصر الثابتة على تجربة المستخدم في الشاشات الصغيرة.
  5. اختبر سلوك sticky جيداً لأن عمله قد يتأثر بارتفاع الحاوية أو إعدادات التمرير.

الخلاصة التقنية

فهم التموضع في CSS هو الأساس لأي واجهة دقيقة وسهلة الصيانة. إذا كنت تحتاج إلى ترتيب عام ومحاذاة مرنة، فإن Flexbox هو الخيار الذكي والأسرع. أما إذا كنت تريد التحكم الدقيق بمكان عنصر معين، فخصائص position تمنحك الأدوات اللازمة، بشرط أن تستخدم كل نوع في موضعه الصحيح. من الناحية العملية، المزج بين position: relative وposition: absolute، إلى جانب الاعتماد على Flexbox في التخطيط العام، يُعد من أكثر الأساليب كفاءة في تطوير واجهات حديثة ومتجاوبة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *