فصل ششم: نمایش (Display) و مدل جایگیری (Position) عناصر در CSS

در این فصل با دو مفهوم بسیار مهم سر و کار داریم که کنترل می‌کنند عناصر در داخل صفحه چطور ظاهر و جایگذاری شوند:

• display
• position

۱. ویژگی display

ویژگی display تعیین می‌کنه که یک عنصر چطور «نمایش داده بشه» و چه تاثیری رو ساختار کلی صفحه داشته باشه.

• block:
  عنصر کل عرض والدش رو می‌گیره (مثل div، h1).
• inline:
  فقط به اندازه‌ی محتوای خودش فضا می‌گیره و کنار سایر عناصر inline قرار می‌گیره (مثل span، a).
• inline-block:
  ترکیبی از هر دو! هم کنار سایر عناصر می‌تونه باشه، هم می‌تونی برایش عرض و ارتفاع بدی.
• none:
  عنصر رو اصلاً نمایش نمی‌ده (انگار وجود نداره).

مثال:

.block-element {
  display: block;
}
.inline-element {
  display: inline;
}
.inline-block-element {
  display: inline-block;
  width: 120px;
  height: 40px;
}
.hide {
  display: none;
}

۲. ویژگی position

ویژگی position مشخص می‌کنه جای یک عنصر نسبت به والدش یا نسبت به صفحه چطور باشه. حالت‌های اصلی:

• static (پیش‌فرض):
  مکان طبیعی عنصر در جریان صفحه
• relative:
  می‌تونی با استفاده از top, left, right, bottom عنصر رو نسبت به جای فعلی خودش جابجا کنی.
• absolute:
  به نزدیک‌ترین والد position‌دار خودش می‌چسبه و دقیقا با top, left, right, bottom جایگزین میشه.
• fixed:
  نسبت به کل پنجره مرورگر ثابت می‌مونه (مثلا منوی چسبان).
• sticky:
  تا وقتی اسکرول نکنی عادی می‌مونه، بعد یه نقطه، به صورت ثابت به صفحه می‌چسبه.

مثال:

.relative-box {
  position: relative;
  top: 20px;  /* از مکان عادی‌اش ۲۰px پایین‌تر می‌آید */
}
.absolute-box {
  position: absolute;
  top: 50px;
  right: 40px;
}
.fixed-box {
  position: fixed;
  bottom: 10px;
  left: 20px;
}

مثال کامل:

<div class="box" style="position: relative;">
  Relative box
  <div class="absolute-box" style="position: absolute; right: 10px; top: 10px;">
    Absolute box
  </div>
</div>

.box {
  width: 300px;
  height: 120px;
  background: #e1bee7;
  position: relative;
}
.absolute-box {
  width: 100px;
  height: 30px;
  background: #ba68c8;
  position: absolute;
  right: 10px;
  top: 10px;
}

تمرین

۱. یک جعبه بساز که داخلش یک المان با position: absolute قرار داره.
۲. با display:inline-block چند جعبه کنار هم بچین.
۳. تفاوت حالت‌ها رو تست و مشاهده کن.

نکته سریع:

• استفاده از position و display ترکیبی، ابزار قدرتمندی برای ساخت layout حرفه‌ای صفحات وب هست.
• حتماً تفاوت width/height در display:inline vs inline-block رو تست کن!