در دنیای توسعه وب، مکان‌گذاری مناسب عناصر یکی از موضوعات مهمی است که طراحان وب باید در نظر بگیرند. یکی از این عناصر مهم می‌تواند لینک‌ها یا همان anchorها باشند. مکان‌گذاری صحیح این عناصر نه تنها به زیبایی وب‌سایت کمک می‌کند، بلکه تجربه کاربری بهتری را نیز فراهم می‌سازد. چه شما یک طراح وب حرفه‌ای باشید و چه تازه‌کار، دانستن بهترین روش‌های تعیین مکان لینک‌ها در CSS برایتان بسیار مفید خواهد بود.
هنگامی که صحبت از مکان‌گذاری لینک‌ها می‌شود، مفاهیمی همچون «موقعیت مطلق» و «موقعیت نسبی» به ذهن می‌آید. در CSS، این دو روش موقعیت‌دهی به شما امکان می‌دهند عناصر خود را به دو صورت متفاوت مدیریت کنید. موقعیت‌دهی مطلق به شما اجازه می‌دهد تا عنصر را به یک نقطه معین از والد خود و یا کل صفحه منتقل کنید، در حالی که موقعیت‌دهی نسبی تغییر مکان عنصر نسبت به موقعیت کنونی‌اش را فراهم می‌کند.
عناصر لینک به‌صورت پیش‌فرض بلاک نیستند، به‌همین‌دلیل معمولاً برای تغییر موقعیت آن‌ها نیاز به تعیین خصوصیت خاصی نداریم. اما در مواردی که نیاز به تغییر مکان آن‌ها است (مثلاً برای زیبایی)، از ویژگی‌های CSS بهره می‌بریم.
یکی از نکات کلیدی این است که هنگام استفاده از ویژگی موقعیت‌دهی مطلق، باید به این نکته توجه کرد که عنصر والد خود چگونه تنظیم شده‌است. اگر عنصر والد موقعیت‌دهی نشده باشد، لینک شما به‌صورت دلخواه و بر اساس موقعیت دهی به کل سند قرار خواهد گرفت.
حال نگاهی به یک مثال ساده می‌اندازیم که در آن نحوه تعیین موقعیت یک لینک را درون کد HTML و CSS مشاهده خواهید کرد.
<html>
<head>
<style>
.container {
position: relative;
height: 200px;
}
.link {
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="container">
<a href="#" class="link">Click Me!</a>
</div>
</body>
</html>
کد بالا دو عنصر اصلی دارد: یک div که به عنوان ظرف یا container عمل می‌کند و یک لینک یا a که درون این ظرف قرار دارد. مکاندهی لینک به صورت مطلق انجام شده است.
ابتدای کد HTML که نشان‌دهنده نوع سند است
<head>
برچسب head که شامل اطلاعات و استایل‌های مربوط به سند است
.container
کلاسی که به عنصر
div اختصاص داده شده و موقعیت دهی آن به صورت ثابت می‌باشد.link
کلاسی که به عنصر
a اختصاص داده شده و موقعیت دهی آن به صورت مطلق استposition: absolute;
موقعیت‌دهی لینک به‌صورت مطلق برای تعیین مکان بر اساس موقعیت بالای عنصر والد
left: 100px; و top: 50px;
مقداردهی مکان قرارگیری عنصر
link براساس پیکسل</html>
پایان کد HTML