فهرست مطالب
وقتی میخواهید یک نشان یا دکمه را دقیقاً در گوشه یک کارت بگذارید یا عنصری را چند پیکسل جابهجا کنید، ناگهان چیدمان کل صفحه بههم میریزد. گاهی عنصر مدنظر از کادر والد بیرون میپرد و در گوشه بالای صفحه مینشیند، یا اینکه با جابهجا شدن آن، فضای خالی عجیبی میان بقیه تگها باقی میماند. ریشه این رفتار، تفاوت بنیادین میان دو مقدار relative و absolute در ویژگی position است.
جریان عادی سند چیست
مرورگرها عناصر صفحه را طبق جریان عادی (Normal Flow) میچینند. تگهای بلوکی پشت سر هم از بالا به پایین و تگهای درونخطی کنار یکدیگر قرار میگیرند. ویژگی position بهطور پیشفرض روی مقدار static تنظیم است. در این حالت، ویژگیهای مختصات مثل top ،right ،bottom و left هیچ اثری روی عنصر ندارند.
تغییر این ویژگی به مقادیر دیگر، نحوه تعامل جعبه عنصر را با این جریان ساختاری دگرگون میکند.
رفتار position relative طبق مستندات MDN
بر اساس مستندات رسمی وب در MDN، وقتی عنصری را روی position: relative میگذارید، آن عنصر همچنان در جریان عادی سند باقی میماند. مرورگر ابتدا فضای لازم را برای آن در صفحه در نظر میگیرد و همان ابعاد را رزرو نگه میدارد.
سپس اگر مقادیری مانند top یا left به آن بدهید، عنصر نسبت به جایگاه اولیه خودش جابهجا میشود. این جابهجایی روی موقعیت هیچکدام از عناصر مجاور تاثیری نمیگذارد و جای خالی اولیه آن حفظ میشود؛ گویی عنصر هنوز همانجا ایستاده است.
کاربرد کلیدی دیگر relative این است که بدون برهم زدن چیدمان صفحه، آن عنصر را به یک مبنا یا والد موقعیتیافته تبدیل میکند تا فرزندانش بتوانند نسبت به آن تراز شوند.
رفتار position absolute و خروج از جریان صفحه
مقدار position: absolute رویکردی کاملاً متفاوت دارد. عنصر دارای این ویژگی، به شکل کامل از جریان عادی سند خارج میشود. مرورگر هیچ فضایی در چیدمان برای آن خالی نگه نمیدارد و سایر عناصر طوری رفتار میکنند که انگار چنین عنصری اصلاً در ساختار صفحه وجود ندارد.
مختصات top ،bottom ،left و right در این حالت، فاصله لبههای عنصر را نسبت به نزدیکترین والد موقعیتیافته (یعنی اولین والدی که position آن چیزی غیر از static باشد) تعیین میکنند. اگر هیچ والد موقعیتیافتهای پیدا نشود، مبنای محاسبه همان بلوک اولیه سند یا همان صفحه نمایش خواهد بود.
یک نمونه عملی برای ایجاد کارت با برچسب شناور
رایجترین الگو برای استفاده همزمان از این دو مقدار، ساخت کارتهایی است که نشان یا برچسب ویژهای روی گوشه آنها شناور است:
html<div class="card">
<span class="badge">جدید</span>
<h3>دوره آموزشی</h3>
<p>آشنایی با مبانی طراحی ساختار صفحات وب</p>
</div>
استایلهای لازم برای تراز صحیح این اجزا به شکل زیر نوشته میشوند:
css/* والد به عنوان مبنای مختصات تعیین میشود */
.card {
position: relative;
width: 300px;
padding: 24px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background-color: #ffffff;
}
/* نشان از جریان خارج شده و به گوشه والد میچسبد */
.badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: 4px;
background-color: #2563eb;
color: #ffffff;
font-size: 12px;
}
در این خروجی، کارت درون جریان عادی سند قرار دارد و اندازه آن بهدرستی محاسبه میشود. برچسب badge به خاطر مقدار absolute هیچ فضایی از متن عنوان داخل کارت را اشغال نمیکند و دقیقاً در فاصله ۱۲ پیکسلی از بالا و چپ والد خود یعنی card قرار میگیرد.
اشتباههای رایج در استفاده از position
یک خطای متداول میان طراحان وب، فراموش کردن position: relative روی عنصر والد است. وقتی نشان یا آیکونی را با مقدار absolute استایل میدهید اما والد آن پیشفرض مانده باشد، عنصر تا ریشه سند بالا میرود و به گوشه کل صفحه میچسبد. برای مهار فرزندان شناور، همیشه والد مستقیم را با position: relative مشخص کنید.
اشتباه دیگر، استفاده بیش از حد از absolute برای چیدن اجزای کلی صفحه است. از آنجا که عناصر مطلق فضایی در سند اشغال نمیکنند، استفاده از آنها برای بخشهای اصلی مثل ستونها یا بلوکهای متنی، پایداری واکنشگرایی صفحه را از بین میبرد و روی دستگاههایی با اندازههای مختلف تصویر، تداخل محتوایی ایجاد میکند.
سؤالات پرتکرار
تفاوت relative و absolute چیست؟relative عنصر را در جریان سند نگه میدارد و نسبت به جای خودش جابهجا میکند؛ absolute عنصر را از جریان خارج میکند و نسبت به نزدیکترین والد موقعیتیافته تراز میشود.
چرا عنصر absolute به گوشه صفحه میچسبد؟
معمولاً چون والد position: relative ندارد و مبنا میشود کل سند.
قدم بعدی
تسلط بر این مفاهیم پایه، درک ویژگیهای پیشرفتهتری مثل لایهبندی با z-index و موقعیتدهی با sticky را سادهتر میکند. برای تمرین ساختارمند این مباحث و یادگیری چیدمان مدرن وب، دوره وب از صفر تا حرفهای: HTML و CSS مسیر یادگیری کامل این استانداردها را به همراه تمرینهای کاربردی پوشش میدهد.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربهتان را بنویسید تا نویسندهی مطلب پاسخ بدهد.