position در CSS
درس‌های جریان گفتند جعبه چطور وارد خط می‌شود. position سؤال دیگری می‌پرسد: این جعبه نسبت به جای عادی‌اش، نسبت به جدش، یا نسبت به صفحه کجا بنشیند؟ قبل از بازی با stacking یا float، این پنج مقدار روزمره را مسلط شوید.
جعبهٔ ابزار position
📊 position یک‌نگاهه
| مقدار | کار روزمره |
|---|---|
static |
پیش‌فرض — top/left معمولاً فایدهٔ جدی ندارد |
relative |
از جایش کمی جابه‌جا می‌شود؛ فضایش می‌ماند؛ می‌تواند لنگر absolute باشد |
absolute |
از جریان عادی خارج می‌شود؛ نسبت به نزدیک‌ترین جدِ دارای position غیر static قرار می‌گیرد |
fixed |
از جریان خارج و به viewport می‌چسبد؛ با اسکرول صفحه تکان نمی‌خورد |
sticky |
اول مثل relative است؛ بعد از آستانهٔ اسکرول داخل ظرفش می‌چسبد |
آفست‌های top و right و bottom و left فقط وقتی معنی دارند که position دیگر static نباشد. اول حالت را انتخاب کنید، بعد آفست را ریز کنید.
relative — یک جابه‌جایی مؤدبانه
relative عنصر را در جریان نگه می‌دارد. فضای قبلی‌اش رزرو می‌ماند. آفست کوچک برای تنظیم نوری عالی است — و برای علامت‌زدن پدری که فرزندهای absolute باید از او اطاعت کنند.
.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}
absolute — از جریان برو بیرون
absolute جعبه را از جریان عادی بیرون می‌کشد. همسایه‌ها شکاف را می‌بندند. جای‌گذاری نسبت به نزدیک‌ترین جد با position غیر از static است — اغلب یک پدر relative. بدون آن لنگر، ممکن است عنصر به بلوک بزرگ‌تری بالا برود.
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}
برای absolute خانه بسازید
فرزند absolute را با پدر عمدی جفت کنید. رابطه را با کلاس نام بگذارید تا چیدمان خوانا بماند.
.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}
.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
fixed — به viewport بچسب
fixed عنصر را به صفحهٔ نمایش پین می‌کند. اسکرول صفحه جایش را عوض نمی‌کند. برای اعلان یا نوار آرام خوب است — نه میان‌بر هر چیدمان ستونی.
.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}
sticky — اول relative، بعد چسبیده
sticky تا وقتی از آستانهٔ اسکرول رد نشده‌اید در جریان می‌ماند (top رایج است)، بعد داخل جد اسکرول‌شونده‌اش می‌چسبد. جا برای اسکرول و پدر منطقی لازم دارد — وگرنه حس خراب بودن می‌دهد.
.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}
عادت آرام position
relative را برای جابه‌جایی کوچک و لنگر absolute بگذارید. absolute را برای نشان و پوشش داخل پدر مشخص. fixed و sticky را برای کروم عمدی نگه دارید. stacking با z-index و پاک‌سازی float درس خودشان را دارند.
.panel {
position: relative;
}
.panel__tag {
position: absolute;
top: 0;
left: 0;
}
خودتان امتحان کنید
- یک
.cardرا باposition: relativeوtop/leftکوچک جابه‌جا کنید. .badgeرا باabsoluteداخل پدرrelativeبه نام.mediaبگذارید.- یک اعلان کوچک
fixedدر گوشه بسازید — اسکرول کنید و ببینید می‌ماند. - یک برچسب
stickyباtop: 0در بخش بلندِ قابل‌اسکرول امتحان کنید. - یک جمله بنویسید: کی absolute امن‌تر از fixed است؟
اشتباه‌های رایج
absoluteبدون پدر دارای position و تعجب از اینکه چرا خیلی دور می‌پرد- برای چیدمان عادی صفحه سراغ
fixedرفتن - انتظار کار کردن
stickyبدون فضای اسکرول یا با جدهای متناقض - این درس را مثل درس ردیف inline-block دیدن (کار دیگری است)
- ریختن دستورهای z-index یا float اینجا به‌جای یادگیری حالت‌های جای‌گذاری
جمع‌بندی
positionجای‌گذاری نسبت به جریان، اجداد یا viewport را کنترل می‌کندrelativeجابه‌جا و لنگر می‌کند؛absoluteاز جریان بیرون می‌آید داخل همان لنگرfixedبه viewport می‌چسبد؛stickyرفتار relative و چسبیده را مخلوط می‌کند- آفست‌ها فقط وقتی position غیر static باشد معنی دارند
- ابزار stacking و float را برای بعد بگذارید — اول این پنج حالت را مسلط شوید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود