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