توضیح صفت position
ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:
static :
این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.
absolute :
این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.
Relative :
حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20 مقدار ۲۰ پیکسل به موقعیت عادی اضافه می کند.
fixed :
این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.
حالا به صورت کد:
static
این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای top, left, bottom, right کاربردی ندارند.
این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد.
fixed
چون اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم. اما در هر صورت ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می کنیم:
در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم:
<div style=”position:fixed; top:50%; float:right”>اگر با مرورگر netscape یا مرورگرهایی مثل firefox و opera از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به نمایش در می آیند.</div>
اگر می خواهید ببینید این ویژگی چگونه کار می کند لینک زیر را با یکی از مرورگرهای Opera, Netscape یا Firefox مشاهده کنید و صفحه را با استفاده از اسکرول بار به بالا و پایین ببرید:
استفاده از ویژگی position:fixed ( لینک در پنجره جدید باز می شود ).
absolute
ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.
در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید:
<div style=”position:absolute; top:65px; right:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;”>این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>
همانطور که در کد بالا می بینید برای DIV موقعیتی با فاصله ۶۵ پیکسل از بالای صفحه و ۲۰ پیکسل از سمت راست صفحه تعیین کرده ایم. با کلیک کردن بر روی لینک زیر می توانید نتیجه را مشاهده کنید:
استفاده از absolute برای ویژگی position ( لینک در یک پنجره جدید باز خواهد شد ).
ویژگی Relative :
حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20 مقدار ۲۰ پیکسل به موقعیت عادی اضافه می کند.
