آموزش طراحی سایت (HTML CSS Javascript) | آتریا

خصوصیت position

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

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

h2
{
position:absolute;
left:100px;
top:150px;
}

خودتان امتحان کنید »

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

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

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

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
static	موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.	نمایش دادن »
absolute	موقعیت عنصر نسبت به اولین عنصر والدش که مکان دهی شده است (گه مکان دهی استاتیک نباشد) نمایش داده می شود.	نمایش دادن »
fixed	موقعیت عنصر نسبت به پنجره مرورگر مکان دهی می شود. به عبارت دیگر، موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.	نمایش دادن »
relative	یک عنصر نسبت به مکان عادی خودش، مکان دهی می شود.	نمایش دادن »
inherit	تعیین می کند که باید از عنصر والدش ارث بری داشته باشد.

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

Position:relative

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

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

CSS Position (بیاموز CSS)

: نوشته شده توسط امیر پهلوان صادق; بازدید: 8766

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

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

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی