خانه / مقالات اموزشی / css / خصوصیت position در css
آموزش CSS
آموزش CSS

خصوصیت position در css

آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر

موقعیت عناصر در صفحه

Positioning به شما این امکان را می دهد که موقعیت هر عنصر را به دقت در یک سند مشخص کنید. می توان مشخص کرد که موقعیت یک عنصر به عنصر پدر خود وابسته باشد یا به پنجره ی مرورگر. با استفاده از positioning می توان یک عنصر را بر روی عنصر دیگر لایه بندی کرد. Positioning شامل خاصیت position و چهار مقدار left , right , bottom ,top می باشد که مختصات دقیق محل قرار گیری عنصر را میتوان با استفاده از آن ها تعیین کرد.

خصوصیت position

این خاصیت به تنهایی کار خاصی را بر روی عنصر انجام نمی دهد. و همیشه به همراه خاصیت های left , right , left یا top می آید،( و بلعکس) اما قبل از مقدار دهی به این خاصیت ها در اول حتما باید به خصوصیت position یکی از چهار مقدار زیر را داد:

  • Static : مقدار پیشفرض، و همان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می باشد.
  • Relative : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می باشد.
  • Absolute : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می باشد.
  • Fixed : عناصر fixed همواره در محل خود باقی می مانند حتی اگر سند scroll شود.

حال به تشریح هر یک مقادیر فوق به همراه مثال می پردازیم:

مقدار Static

مقدار static همانطور که گفتیم تاثیری بر روی عنصر ندارد و همان حالت default عناصر می باشد، بجز در عناصر لیست ها (ul ,ol ,li ) . مقدار پیشفرض برای عناصر لیست ها none است، اما اگر برای عناصر لیستها از مقدار static استفاده کنیم حالت تو در توی آن ها از بین خواهد رفت.

نکته : این حالت قبلا به وجود می آمد اما پس از آمدن css3 مقدار none برای خصوصیت position برداشته شد و دیگر همچین حالتی در مرورگر های جدید برای لیست ها به وجود نمی آید و لیست ها نیز مقدار پیشفرض static را دارند.

Offset Property

عناصری که مقدار relative , absolute  و یا fixed را دارند را می توان با استفاده از offset property ها، ( همان left, top , bottom ,right ) تعیین موقعیت کرد.

مقدار Relative

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

مثال برای مقدار relative :

کد html :

و کد css :
 

نتیجه در مرورگر: ( بدون مختصات دهی)

1x1.trans آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر

حال style عنصر div.children را به مقدار زیر تغییر می دهیم

 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر

می بییند که box ما از محلی که در آن قرار گرفته بود شروع به حرکت کردن کرده ، یعنی  ۱۰px از سمت بالا فاصله گرفت و ۲۰px از سمت راست فاصله گرفت.

نکته : استفاده از مقادیر منفی برای خصوصیات right , top , right , bottom مجاز می باشد

مقدار absolute

این مقدار موقعیت یک عنصر را نسبت به پنجره ی مرورگر تعیین می کند یعنی نقطه شروع عنصر از یکی از گوشه های پنجره (با توجه به خصوصیتی که تعیین خواهیم کرد) خواهد بود. به مثال زیر دقت کنید :

مثال:

کد html  :

و کد css :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر

اگر دقت کنید، می بینید که نقطه شروع حرکت عنصر دیگر وابسته به عنصر پدر(مربع سبز) نیست و با توجه به خصوصیت top و right که تعیین کردیم عنصر از گوشه سمت راست و بالای مرورگر شروع به حرکت کرده است.

مقدار fixed

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

(همانند دکمه های اشتراک گذاری که در سمت راست مطلب می بینید).

بسیار خب؛ تا به اینجا با نحوه تعیین موقعیت عناصر، و مختصات دهی به آن ها آشنا شدید، در جلسه بعد با طریقه نمایش عناصر (display) و طریقه لایه دهی (z-index) آشنا خواهیم شد.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net