امتیاز موضوع:
  • 15 رأی - میانگین امتیازات: 2.93
  • 1
  • 2
  • 3
  • 4
  • 5
تغییر موقعیت عناصر صفحه با استفاده از CSS
#1
[تصویر:  adobe-blueprint-css-icon.png]
position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

  • static :
    این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.
  • absolute :
    این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.
  • 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>


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 موقعیتی با فاصله 65 پیکسل از بالای صفحه و 20 پیکسل از سمت راست صفحه تعیین کرده ایم.


top
این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. )
در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:65px استفاده شده است که این ویژگی معین می کند که DIV با فاصله 65 پیکسل از بالای پنجره مرورگر به نمایش در می آید.
مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس از عدد با ید از علامت درصد (%) استفاده شود.


bottom
کاربردی همانند ویژگی بالا دارد با این تفاوت که میزان فاصله عناصر را از پایین پنجره مرورگر مشخص می کند.در مثال بعدی از این ویژگی استفاده خواهیم کرد.


right
این ویژگی فاصله عناصر را از سمت راست صفحه تعیین می کند. همانطور که در مثال قبل می بینید، از این ویژگی به صورت right:20px استفاده شده است یعنی DIV مربوطه با فاصله 20 پیکسل از سمت راست پنجره مرورگر قرار خواهد گرفت.


left
این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.
در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم:


کد:
<div style="position:absolute; bottom:65px; left:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

در مثال ذکر شده DIV به اندازه 65 پیکسل از پایین و 20 پیکسل از سمت چپ پنجره مرورگر فاصله دارد.


پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل انجمن مخ ها 0 243 27-08-2012، 09:06 PM
آخرین ارسال: انجمن مخ ها
  تغییر شکل نشانگر ماوس با استفاده از استایل انجمن مخ ها 0 241 27-08-2012، 08:58 PM
آخرین ارسال: انجمن مخ ها
  تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS انجمن مخ ها 0 233 26-08-2012، 07:00 PM
آخرین ارسال: انجمن مخ ها
  تغییر رنگ و تصویر زمینه عناصر HTML با CSS انجمن مخ ها 0 264 26-08-2012، 06:24 PM
آخرین ارسال: انجمن مخ ها
  نحو تغییر رنگ متن با استفاده از CSS انجمن مخ ها 0 198 26-08-2012، 05:57 PM
آخرین ارسال: انجمن مخ ها
  تنظیم فونت صفحه با استفاده از استایل(CSS) انجمن مخ ها 0 233 26-08-2012، 02:29 PM
آخرین ارسال: انجمن مخ ها
  تنظیم حاشیه و فاصله از لبه در عناصر صفحه انجمن مخ ها 0 220 25-08-2012، 08:23 PM
آخرین ارسال: انجمن مخ ها
  نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل انجمن مخ ها 1 280 25-08-2012، 07:32 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان