CSSطراحی سایتگوناگون

۱۸-خاصیت Position در CSS

در این بخش میخواهیم نحوه قرار گیری عناصر درصفحات را به شما دوستان بیاموزیم.

 

 

 

 

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

 


 

به کمک خصوصیت position میتوان برای عناصر موقعیت دهی های مختلف top,bottom,left,right را تنظیم نمود.

 

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

 

  • position:static – موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.
  • position:fixed – موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.
  • position:relative – یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
  • position:absolute – موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش داده می شود.

 


 

۱Static

 

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

  • توجه: اگر موقعیت دهی با staticتنظیم شود دیگر خصوصیات top,bottom,left,right تاثیری نخواهند داشت.

 


 

۲-fixed

 

در تنظیم موقعیت دهی عنصر به صورت fixed عنصر مورد نظر در هر صورت در همان موقعیت خود باقی میماند. حتی با بالا وپایین کردن صفحه با موس ویا تغییر اندازه صفحه مرورگر موقعیت عنصر مورد نظر تغییر نمیکند.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

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

 


 

۳-relative

 

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

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

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

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

عنصری که به صورت نسبی موقعیت دهی شده باشد، اغلب به عنوان ظرفی برای عناصر absolute استفاده می شوند:

 

 

 


 

 ۴-absolute

 

در این بخش عنصر با توجه به مکان پدر خود خود موقعیت دهی میشود و اگر پدر(والد) وجود نداشته باشد با توجه به بلوک <html> موقعیت دهی میشود.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

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

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

 


 

روی هم قرار دادن عنصر های مختلف(overlap)

 

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

خصوصیت z-index ترتیب عناصر را مشخص میکند(که کدام عنصر پشت ویا کدام عنصر رو دیگر عناصر قرار بگیرد).مقدار این خصوصیت میتواند مثبت یا منفی باشد.

 

  • تصویر قطعه کد بالا به شکل زیر است:

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

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

 

 


 

 

بیشتر تمرین کنید

 

 

۱-تنظیم شکل یک عنصر(تنظیم به شکلی که عنصر کوتاه تر نمای داده شود)

  • تصویر قطعه کد بالا به شکل زیر است:

 

 


 

 

۲-چگونه با لبریزشدن (overflow) عناصر برخورد کنیم.(زمانی که محتوای یک عنصر خیلی بزرگ است)

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 

  • به کمک قطعه کد زیر در css میتوانید مرورگر را مجبور کنید تا از یک حد بیشتر با سرریز برخورد کند:
 

 


 

۳-تغییر شکل مکان نما (cursor)

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

 

خصوصیتتوضیحاتمقادیرCSS
bottomفاصله لبه پایینی را برای یک box موقعیت دهی شده تنظیم می کندauto
length
%
inherit
2
clipشکل یک عنصر که به صورت absolute موقعیت دهی شده است را کوتاه می کندshape
auto
inherit
2
cursorشکل مکان نما را مشخص می کندurl
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
leftفاصله لبه چپ را برای یک box موقعیت دهی شده تنظیم می کندauto
length
%
inherit
2
overflowمشخص می کند اگر محتوای یک عنصر خیلی بزرگ باشد و به اصطلاح سریز کند چه اتفاقی بیافتدauto
hidden
scroll
visible
inherit
2
positionنوع موقعیت دهی یک عنصر را مشخص می کندabsolute
fixed
relative
static
inherit
2
rightفاصله لبه راست را برای یک box موقعیت دهی شده تنظیم می کندauto
length
%
inherit
2
topفاصله لبه بالایی را برای یک box موقعیت دهی شده تنظیم می کندauto
length
%
inherit
2
z-indexترتیب نمایش یک عنصر را مشخص می کند (جلو یا پشت) number
auto
inherit
2

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن