افست‌های موقعیت‌یابی

آشنایی عمیق با top، right، bottom و left و نحوه استفاده از آن‌ها با position

افست‌های موقعیت‌یابی چیستند؟

ویژگی‌های top، right، bottom و left موقعیت دقیق یک عنصر positioned را مشخص می‌کنند.

چهار ویژگی offset

ویژگیتوضیحمثال
topفاصله از لبه بالاییtop: 20px
rightفاصله از لبه راستیright: 10px
bottomفاصله از لبه پایینیbottom: 0
leftفاصله از لبه چپیleft: 50%

نکته مهم: فقط با position کار می‌کنند

این ویژگی‌ها فقط روی عناصری که position غیر از static دارند تأثیر می‌گذارند:

/* ❌ بی‌تأثیر — static */
    .box {
        position: static;
        top: 50px;  /* هیچ اتفاقی نمی‌افتد */
    }
    
    /* ✅ کار می‌کند */
    .box {
        position: relative;
        top: 50px;  /* ۵۰px پایین می‌آید */
    }

مقادیر offset

مقدارتوضیح
autoخودکار (پیش‌فرض)
عدد + واحد20px، 50%
inheritاز والد به ارث ببرد

وسط‌چین کردن با offset

ترکیب absolute و offset برای وسط‌چین کردن:

/* وسط‌چین افقی و عمودی */
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

پر کردن کامل والد

/* تمام کردن والد */
    .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* یا کوتاه‌تر: inset: 0; */
    }

ویژگی inset (مدرن)

/* معادل top/right/bottom/left */
    .overlay {
        position: absolute;
        inset: 0;  /* همه صفر */
    }
    
    /* با مقدار */
    .box {
        position: absolute;
        inset: 10px 20px;  /* عمودی افقی */
    }

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

نکات مهم

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

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