021-20483015

صفت position در CSS

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

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

static
relative
fixed
absolute


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

 

 

;position:static

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


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

مثال :

position static
div.static {
    position: static;
    border: 3px solid #73AD21;
}
مشاهده مثال
 

 

 

 

 

;position:relative

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

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

مثال :

position relative
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
مشاهده مثال
 

 

 

 

 

position: fixed;

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

مثال :

position fixed
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
مشاهده مثال
 

 

 

 

 

position: absolute;

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

مثال :

position absolute
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;
}
مشاهده مثال
 


عنصري كه ترتيب نمايش بزرگتري دارد بر روي عنصري با ترتيب نمايش كمتر قرار مي گيرد.

نكته !‌ اگر دو عنصر در يك قسمت موقعيت دهي شوند و z-index آنها تنظيم نشده باشد ،‌ آخرين عنصري كه در كد HTML موقعيت دهي شده است ،‌ بالاتر قرار مي گيرد.

 

 

 

 

 

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


مثال :

متن روی تصویر
.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
مشاهده مثال
 


مثال بالا را مي توان براي 3 گوشه ديگر تصوير و وسط آن تنظيم كرد.

 

 

 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط