مبانی 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 را ترجیح بده.