مبانی CSS · ۱۰ دقیقه مطالعه

نمایش، موقعیت، float و overflow

display

display: block;        /* کل عرض، خط جدید */
display: inline;       /* در یک خط */
display: inline-block; /* خطی ولی با width/height */
display: none;         /* مخفی کامل */

position

position: relative;  /* نسبت به جای خودش */
position: absolute;  /* نسبت به نزدیک‌ترین والدِ positioned */
position: fixed;     /* نسبت به پنجره، هنگام اسکرول ثابت */
position: sticky;    /* تا نقطه‌ای عادی، بعد می‌چسبد */

با top/right/bottom/left جابه‌جا می‌کنی.

الگوی طلایی

.card { position: relative; }
.card .badge { position: absolute; top: 10px; left: 10px; }

نشان روی گوشهٔ کارت — دقیقاً همین.

z-index و overflow

.modal { position: fixed; z-index: 100; }  /* لایه بالاتر */
.box { overflow: auto; }   /* اسکرول اگر محتوا بیرون زد */

float (قدیمی)

float: left/right روزی برای چیدمان بود؛ امروز Flexbox/Grid را ترجیح بده.

🧪

خودت امتحان کن

اجرا در مرورگرِ خودت — امن

کد را تغییر بده و «اجرا» را بزن. این کد فقط در مرورگر خودت اجرا می‌شود.

برای ثبت پیشرفت و کسب XP وارد شو.

ورود به میدان
→ Box Model و اندازه
متن، لیست، جدول و لینک ←