خصوصیت position

چاپ

مثال (خصوصیت position)

مکان دهی عنصر <h2>

h2
{
position:absolute;
left:100px;
top:150px;
}
خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.


تعریف و کاربرد

با استفاده از خصوصیت position، می توان روش مکان دهی به یک عنصر را مشخص کرد (static, relative, absolute or fixed).

مقدار پیشفرض static
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.position="absolute"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت positionرا پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.


مقدارهای خصوصیت

مقدارتوضیحاتنمایش دادن
static

موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.

نمایش دادن »
absolute

موقعیت عنصر نسبت به اولین عنصر والدش که مکان دهی شده است (گه مکان دهی استاتیک نباشد) نمایش داده می شود.

نمایش دادن »
fixed

موقعیت عنصر نسبت به پنجره مرورگر مکان دهی می شود. به عبارت دیگر، موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.

نمایش دادن »
relative

یک عنصر نسبت به مکان عادی خودش، مکان دهی می شود.

نمایش دادن »
inherit

تعیین می کند که باید از عنصر والدش ارث بری داشته باشد.

 

مثالs

مثال - خودتان امتحان کنید

Position:relative

در این مثال مشاهده خواهید کرد که چگونه یک عنصر نسبت به مکان عادی خودش موقعیت دهی می شود.


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

CSS Position (بیاموز CSS)