تنظیم موقعیت عناصر CSS

تنظیم موقعیت عناصر CSS

خصوصیات مربوط به موقعیت در CSS به شما اجازه می دهد تا موقعیت یک عنصر را تغییر داده(position)، یا مکان یک عنصر را پشت دیگر عناصر قرار دهید(z-index) و یا مشخص کنید، زمانی که محتوای یک عنصر خیلی بزرگ شد، چه اتفاقی بیافتد(overflow)

موقعیت عناصر در صفحه با خصوصیات top و bottom و left و یا right تنظیم می شود، اما این خصوصیات کار نخواهند کرد مگر اینکه ابتدا خصوصیت position تنظیم شود و همچنین خصوصیات ذکر شده با توجه به روش موقعیت دهی، به صورت متفاوت عمل خواهند کرد.

تنظیم موقعیت عناصر CSS تنظیم موقعیت عناصر css تنظیم موقعیت عناصر CSS Adjust the position of elements in CSS

تنظیم موقعیت عناصر CSS

 روش مختلف برای موقعیت دهی یک عنصر وجود دارد:

  • static :
    این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  • absolute :
    این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  • fixed :
    این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

۱- Static

موقعیت عناصر HTML در صفحه، به صورت پیشفرض static است. اگر موقعیت یک عنصر با مقدار static تنظیم شود، همیشه مطابق جریان معمول نمایش داده می شود یا به عبارتی در همان جایی که کد آن قرار دارد نمایش داده می شود.

توجه: با تنظیم خصوصیت position با مقدار “static”، خصوصیات top و bottom و right و left اثری نخواهند داشت.


۲- fixed

 یک عنصر با موقعیت ثابت(fixed) در واقع نسبت به پنجره مرورگر، موقعیت دهی می شود.

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

مرورگرهای IE7 و IE8 در صورتی که یک DOCTYPE! در بالای صفحه تنظیم کرده باشیم این حالت را پشتیبانی می کنند. عنصری که به صورت ثابت موقعیت دهی شده، در واقع از حالت عادی خارج شده است و در HTML عنصری که اینگونه رفتار کند وجود ندارد.

 ۳- Relative

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

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

۴- Absolute

ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

top

این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. )

در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:65px استفاده شده است که این ویژگی معین می کند که DIV با فاصله ۶۵ پیکسل از بالای پنجره مرورگر به نمایش در می آید.

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


bottom

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


right

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


left

این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.

روی هم قرار دادن عناصر (overlap)

 

زمانی که موقعیت دهی عناصر، خارج از حالت عادی باشد، می توانند روی دیگر عناصر قرار بگیرند.

خصوصیت z-index ترتیب عناصر را مشخص می کند (کدام عنصر باید جلو یا پشت دیگر عناصر باشد)

مقدار این خصوصیت می تواند مثبت یا منفی باشد:

یک عنصر با مقدار بزرگتر همیشه جلوتر از عنصری با مقدار کوچکتر قرار می گیرد.

اگر بدون اینکه خصوصیت z-index را تنظیم کرده باشیم، دو عنصر روی یکدیگر قرار بگیرند، عنصری که کد HTML آن بعد از دیگری آمده، بالاتر قرار خواهد گرفت.
آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید