موقعیت‌یابی (Position)

آشنایی کامل با position در CSS: static، relative، absolute، fixed و sticky

ویژگی Position در CSS

position مشخص می‌کند که یک عنصر چگونه در صفحه موقعیت‌یابی می‌شود. این ویژگی یکی از مهم‌ترین ابزارهای چیدمان است.

پنج مقدار position

مقدارتوضیحکاربرد
staticپیش‌فرض — در جریان عادیاکثر عناصر
relativeنسبی به موقعیت اصلیوالد برای absolute
absoluteنسبی به نزدیک‌ترین والد positionedپاپ‌آپ، آیکون
fixedنسبی به ویوپورت (ثابت)هدر چسبان، سایدبار
stickyترکیب relative و fixed ⭐هدر که می‌چسبد

ویژگی‌های offset

پس از تنظیم position (به‌جز static)، می‌توان از چهار ویژگی offset استفاده کرد:

ویژگیتوضیح
topفاصله از بالا
rightفاصله از راست
bottomفاصله از پایین
leftفاصله از چپ

۱. Static (استاتیک)

حالت پیش‌فرض — عنصر در جریان عادی صفحه قرار دارد:

div {
        position: static;  /* پیش‌فرض */
        /* top, left بی‌تأثیر هستند */
    }

۲. Relative (نسبی)

عنصر نسبت به موقعیت اصلی خودش جابه‌جا می‌شود، اما جای اصلیش محفوظ می‌ماند:

.box {
        position: relative;
        top: 20px;    /* ۲۰px پایین می‌آید */
        left: 10px;   /* ۱۰px راست می‌رود */
    }

⚠️ مهم‌ترین کاربرد relative: تبدیل شدن به والد برای absolute.

۳. Absolute (مطلق)

عنصر نسبت به نزدیک‌ترین والد positioned (یعنی relative، absolute، fixed یا sticky) موقعیت‌یابی می‌شود. اگر والد positioned نباشد، نسبت به body قرار می‌گیرد.

.parent {
        position: relative;  /* والد positioned */
    }
    
    .child {
        position: absolute;
        top: 0;
        right: 0;  /* گوشه بالا-راست والد */
    }

⚠️ عنصر absolute از جریان صفحه خارج می‌شود — جای آن محفوظ نمی‌ماند.

۴. Fixed (ثابت)

عنصر نسبت به ویوپورت (صفحه نمایش) موقعیت‌یابی می‌شود — حتی با اسکرول هم حرکت نمی‌کند:

.header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

۵. Sticky (چسبان) ⭐

ترکیب relative و fixed — ابتدا relative است، اما وقتی به offset می‌رسد، مثل fixed می‌چسبد:

.navbar {
        position: sticky;
        top: 0;  /* وقتی به بالا رسید، می‌چسبد */
        background: white;
        z-index: 100;
    }

z-index (لایه‌بندی)

وقتی عناصر روی هم می‌افتند، z-index مشخص می‌کند کدام بالاتر است:

.modal {
        position: fixed;
        z-index: 9999;  /* بالاترین لایه */
    }
    
    .header {
        position: sticky;
        z-index: 100;
    }
    
    .dropdown {
        position: absolute;
        z-index: 50;
    }

مثال: نشان روی کارت

.card {
        position: relative;  /* والد */
    }
    
    .badge {
        position: absolute;
        top: -10px;
        right: -10px;
        background: red;
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

مثال: هدر چسبان

header {
        position: sticky;
        top: 0;
        background: #2c3e50;
        color: white;
        padding: 15px 20px;
        z-index: 100;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط