چیدمان (Layout) و موقعیت‌دهی (Positioning) دو مفهوم کلیدی در CSS هستند که به طراحان وب امکان کنترل دقیق بر نحوه قرارگیری عناصر در صفحه را می‌دهند. این دو مفهوم با هم کار می‌کنند تا ساختار بصری و جریان صفحه وب را شکل دهند.

۱. مدل جعبه‌ای (Box Model)

قبل از پرداختن به چیدمان، درک مدل جعبه‌ای ضروری است. هر عنصر HTML مانند یک جعبه مستطیلی در نظر گرفته می‌شود که از چهار لایه تشکیل شده است:

  • محتوا (Content): فضای اصلی که متن، تصویر یا سایر محتواها در آن قرار می‌گیرند.
  • فضای داخلی (Padding): فضایی شفاف بین محتوا و قاب (Border). این فضا به دور محتوا اضافه می‌شود و باعث بزرگ‌تر شدن جعبه می‌شود.
  • قاب (Border): خطی که دور فضای داخلی و محتوا کشیده می‌شود. می‌توان ضخامت، سبک (مانند خط پر، خط‌چین) و رنگ قاب را تعیین کرد.
  • حاشیه (Margin): فضایی شفاف در خارج از قاب. این فضا بین جعبه فعلی و جعبه‌های دیگر عناصر مجاور قرار می‌گیرد و به جداسازی عناصر کمک می‌کند.

نکته کلیدی: خصوصیت box-sizing: border-box; رفتار مدل جعبه‌ای را تغییر می‌دهد. به طور پیش‌فرض، width و height فقط به محتوا اعمال می‌شوند و padding و border به ابعاد کلی اضافه می‌گردند. با border-box، padding و border در ابعاد width و height تعریف شده گنجانده می‌شوند، که کنترل ابعاد را بسیار آسان‌تر می‌کند.

۲. موقعیت‌دهی (Positioning)

CSS امکانات مختلفی برای کنترل موقعیت دقیق عناصر فراهم می‌کند:

  • static (ایستا): این مقدار پیش‌فرض برای تمام عناصر است. عناصر به ترتیب عادی در صفحه قرار می‌گیرند و خصوصیات top, bottom, left, right, z-index روی آن‌ها تأثیری ندارند.
  • relative (نسبی): عنصر نسبت به موقعیت عادی خود جابجا می‌شود. با استفاده از top, bottom, left, right می‌توان آن را کمی جابجا کرد. اما فضای خالی که عنصر در حالت عادی اشغال می‌کرد، همچنان رزرو می‌شود و عناصر دیگر آن را نادیده نمی‌گیرند.
  • absolute (مطلق): عنصر نسبت به نزدیک‌ترین والدِ موقعیت‌داده شده (که position غیر از static دارد) قرار می‌گیرد. اگر والد موقعیت‌داده شده‌ای نباشد، نسبت به اولین عنصر <body> قرار می‌گیرد. top, bottom, left, right موقعیت آن را نسبت به این والد تعیین می‌کنند. این نوع موقعیت‌دهی عنصر را از جریان عادی صفحه خارج می‌کند.
  • fixed (ثابت): عنصر نسبت به پنجره مرورگر (viewport) موقعیت‌دهی می‌شود و حتی با اسکرول صفحه نیز در جای خود ثابت می‌ماند. این روش معمولاً برای ساخت سربرگ‌ها (Headers) یا نوارهای کناری ثابت (Sidebars) استفاده می‌شود.
  • sticky (چسبنده): این حالت ترکیبی از relative و fixed است. عنصر ابتدا مانند relative رفتار می‌کند، اما وقتی از ناحیه دید خارج می‌شود (با اسکرول)، مانند fixed در جای خود ثابت می‌ماند.

۳. چیدمان (Layout)

برای چیدمان عناصر در مقیاس بزرگ‌تر، CSS دو سیستم قدرتمند ارائه می‌دهد:

  • Flexbox (Flexible Box Layout):

  • کاربرد: ایده‌آل برای چیدمان یک‌بعدی (در یک سطر یا یک ستون). برای چیدمان عناصر در یک منو، کارت‌های محصول، یا فرم‌ها بسیار مناسب است.

  • نحوه عملکرد: یک کانتینر (عنصر والد) ایجاد می‌کند که آیتم‌های درون آن (عناصر فرزند) را به صورت انعطاف‌پذیر در یک محور اصلی (اصلی یا عرضی) سازماندهی می‌کند. کنترل‌های زیادی برای تراز کردن، فاصله‌گذاری، و مرتب‌سازی مجدد آیتم‌ها در دسترس است.

  • CSS Grid (Grid Layout):

  • کاربرد: ایده‌آل برای چیدمان دوبعدی (در سطرها و ستون‌ها). برای ساخت ساختار کلی یک صفحه وب (مانند هدر، فوتر، محتوای اصلی، سایدبار) یا چیدمان گالری‌های پیچیده بسیار قدرتمند است.

  • نحوه عملکرد: یک شبکه (Grid) دو بعدی ایجاد می‌کند که عناصر را می‌توان در سطرها و ستون‌های تعریف شده قرار داد. این سیستم کنترل دقیقی بر روی فضا، تراز، و لایه‌بندی عناصر در دو بعد فراهم می‌کند.

ترکیب این مفاهیم - مدل جعبه‌ای برای کنترل ابعاد و فاصله‌ها، موقعیت‌دهی برای کنترل جایگاه عناصر خاص، و سیستم‌های Flexbox/Grid برای چیدمان کلی صفحه - به طراحان اجازه می‌دهد تا طرح‌بندی‌های پیچیده و واکنش‌گرا (Responsive) را با دقت بالا پیاده‌سازی کنند.

کلیدواژه ها : مدل جعبه‌ای CSS-موقعیت‌دهی CSS-چیدمان CSS-فلت باکس-گرید CSS-width-height-padding-margin-border-position-relative-absolute-fixed-sticky-flexbox-grid-