صفت position براي تعيين روش موقعيت دهي به عنصر استفاده مي شود.

در كل 4 نوع روش موقعيت دهي به عنصر وجود دارد :

static
relative
fixed
absolute


پس از مشخص شدن روش ،‌ به وسيله صفات top ،‌ bottom ، left و right موقعيت عنصر مشخص مي شود. البته اين صفات بدون تنظيم كردن صفت position ،‌ تاثير نخواهند داشت.

;position:static

موقعيت عناصر HTML بطور پيش فرض بر روي static تنظيم مي شود. عناصر با موقعيت استاتيك از صفات top , bottom , left و right تاثير نمي گيرند. عنصري كه موقعيتش استاتيك باشد به روش خاصي موقعيت دهي نمي شود و هميشه با توجه به جريان اصلي صفحه در محل عادي خود نمايش داده مي شود.


در مثال زير CSS مورد استفاده قابل مشاهده است.

مثال :

div.static {
    position: static;
    border: 3px solid #73AD21;
}

;position:relative

عنصري كه به روش relative موقعيت دهي شود ، نسبت به موقعيت عادي خود ،‌ موقعيت دهي مي شود.
تنظيم صفات top , bottom , left و right براي چنين عنصري ،‌ موقعيت آن را نسبت به موقعيت عادي عنصر تنظيم كرده و تغيير مي دهد. باقي محتوا جاي خالي ايجاد شده در اطراف عنصر را پر نخواهند كرد.

در مثال زير CSS مورد استفاده قابل مشاهده است.

مثال :

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

عنصري كه داراي position: fixed; باشد ، نسبت به ديد صفحه موقعيت دهي مي شود ،‌ يعني حتي اگر صفحه را اسكرول كنيم ،‌ عنصر در محل تعيين شده ثابت مي ماند. براي تنظيم محل نمايش عنصر از صفات  top , bottom , left و right استفاده مي شود. عنصر فيكس شده جاي خالي در محل عادي خود باقي نمي گذارد.

مثال :

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

موقعيت عنصر با position: absolute; نسبت به نزديكترين عنصر ريشه اي خود كه موقعيت دهي شده است ،‌ تنظيم مي شود. به عبارتي ديگر بجاي اينكه عنصر نسبت به ديد صفحه فيكس شود ،‌ نسبت به عنصر ريشه خود ،‌ فيكس مي شود.
البته اگر يك عنصر با موقعيت absolute عنصر ريشه نداشته باشد ، نسبت به بدنه سند ( عنصر body) فيكس مي شود و با اسكرول شدن صفحه ،‌ به همراه محتواي صفحه حركت مي كند.

مثال :

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

تداخل بين عناصر

زماني كه به عناصر موقعيت مشخصي مي دهيم ،‌ ممكن است با عناصر ديگر تداخل داشته باشند.
صفت z-index ،‌ ترتيب قرار گيري عناصر را مشخص مي كند كه تعيين كننده نمايش آن عنصر بر روي عناصر ديگر يا پشت آنهاست.
مقدار اين صفت براي عناصر مي تواند مثبت يا منفي باشد.

مثال :

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

قرار دادن متن بر روي يك تصوير

مثال :

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}