خاصیت position در css

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

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • خاصیت position در css به چه کاری می آید و چه مقادیری می گیرد؟
  • حاصیت left،right،bottom،top چه هستند و چه مقادیری میگیرند؟
  • حاصیت left،right،bottom،top چه مواقعی تاثیر گذارند؟
  • رابطه بین این چهار خاصیت left،right،bottom،top و position چیست؟
  • و…

با ما همراه باشین  ;-) 

خاصیت position چطور مکان را تغییر می دهد ؟

 اگر تا به حال دقت کرده باشید وقتی چند المان در یک صفحه داریم و مکان یکی را تغییر می دهیم روی مکان بقیه المان ها تاثیر می گذارد ، پس المان ها در حالت طبیعی از هم اثر می پذیرند این یعنی تمام المان های در یک لایه کنار هم قرار گرفته اند. حالا کاربرد خاصیت position این است که اولا می تواند مکان المان را به صورت خیلی دقیقتری تغییر دهد دوما این تغییر مکان هیچ تاثیری بر مکان المان های دیگر نمی گذارد.

معرفی ۴ ویژگی right ,left, bottom و top 

قبل از اینکه سراغ انواع  مقادیر خاصیت position در css برویم باید به یک مسئله خیلی مهم که مکمل این خاصیت می باشد، اشاره کنیم.

به صورت کلی هر موقع از خاصیت position در css برای تعیین مکان المان در صفحه استفاده می کنیم، می توانیم با چهار خاصیت  right ,left, bottom و top موقعیت نهایی المان را مشخص کنیم.به این چهار خاصیت ، خصوصیات آفست می گویند و فقط بر روی المان هایی موثر هستند که خاصیت position دارند.

  • Right: فاصله لبه راست المانی که خاصیت position گرفته از مبداش را مشخص می کند.( هر چی از لبه سمت راست المان به سمت چپ حرکت کنیم، مقدار مثبت به خود می گیرد و برعکسش مقدار منفی)
  • Left: فاصله لبه چپ المانی که خاصیت position گرفته از مبداش را مشخص می کند.( هر چی از لبه سمت چپ المان به سمت راست حرکت کنیم، مقدار مثبت به خود می گیرد و برعکسش مقدار منفی)
  • Bottom: فاصله لبه پایینی المانی که خاصیت position گرفته از مبداش را مشخص می کند( هر چی از لبه سمت پایین المان به سمت بالا حرکت کنیم، مقدار مثبت به خود می گیرد و برعکسش مقدار منفی)
  • Top: فاصله لبه بالایی المانی که خاصیت position گرفته از مبداش را مشخص می کند( هر چی از لبه سمت بالا المان به سمت پایین حرکت کنیم، مقدار مثبت به خود می گیرد و برعکسش مقدار منفی)

نکته: خصوصیات بالا براساس واحدهای موجود در CSS  و درصد مقدار می گیرند.

نکته:  این خصوصیات همزمان تاثیر نمی گذارند. اگر هر دو خصوصیت Top و Bottom را استفاده کنید  الویت با Top می باشد و اگر از هر دو خصوصیت left و right استفاده کنیم در صورتی که dir:ltr باشد الویت با left و در صورتی که dir:rtl باشد الویت با right می باشد.

نکته: با position مشخص می کنیم نسبت به چه مختصاتی تغییر رخ دهد سپس با چهار ویژگی right ,left, bottom و top  تغییر مکان را اعمال می کنیم پس position به تنهایی چیزی نشان نمی دهد.

نگران نباشید جلوتر که مثال زدیم مجدد برگردید و این توضیحات را با دقت بخوانید مطمئن باشید به خوبی متوجه موضوع درس امروز خواهید شد. :-)

انواع مقادیر خاصیت position در CSS 

توجه داشته باشید که این خصوصیت مقادیر مختلفی می گیرد که در این سطح از آموزش ما ۳ مورد با نام های absolute ، fix ، relative  آشنا خواهیم شد.

Static

 مقدار پیش فرض این خاصیت می باشد و اگر به position این مقدار را بدهیم هیچ اتفاقی نمی افتد هر چقدر هم با چهار تا خاصیت right ,left, bottom و top سعی در تغییر مکان المان داشته باشیم تاثیری نخواهد داشت.

مثال:

توضیح:

در مثال بالا ۴ تا div تعریف کردیم و به هر کدام یک id منحصر به فرد و کلاس های یکسان دادیم. در قسمت استایل دهی برای تمام  div ها با کلاس یکسان عرض و ارتفاع و رنگ متن و رنگ بک گراند مشخص کردیم سپس با کمک خاصیت float در css همگی را در یک خط ردیف کردیم و با خصوصیت margin از هم ۱۰ پیکسل فاصله گرفتند. سپس با آی دی #one استایل جداگانه ای به div اول دادیم.

نتیجه:

همانطور که از نتیجه مشخص است ۴ خصوصیت (right ,left, bottom و top) هیچ تاثیری روی div اول اعمال نکرده اند چون position  آن static می باشد.

خاصیت position در css | مثال برای static

Relative

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

مثال:

توضیح:

در ادامه مثال قبل این بار استایل جداگانه ای با آی دی #two به div دوم می دهیم. مقدار position آن را relative دادیم این یعنی نسبت به کدام مختصات تغییر مکان رخ دهد؟سپس با ۴ ویژگی right ,left, bottom و top مکان المان را مشخص کردیم.توجه داشته باشید، مجدد تکرار می کنم اگر از این چهار ویژگی استفاده نشود خاصیت position تغییری اعمال نمی کند.(امتحان کنید)

نتیجه:

خاصیت position در css | مثال برای relative

همانطور که از نتیجه مشخص است div دوم نسبت به مختصات اولیه خودش ( یا مرورگر ) در راستای بالا (top) و چپ (left) جابه جا شده است .(در بالا اشاره کردیم که خصوصیات همزمان تاثیر نمیگذارند. دو خصوصیت bottom  و right با این که مقدار دهی شده اند ولی در این دو راستا تغییر اعمال نشده است) Inspect هم گرفتیم و تیک هر دو خصوصیت bottom  و right را برداشتیم و می بینید که تاثیری ندارد.

نکته: المانی که به صورت  Relative موقعیت دهی شده است، می تواند روی دیگر المان ها قرار بگیرد، و مکان اولیه المان حفظ می شود. زمانی که  یک المان خاصیت position:relative  داشته باشد الویت بالاتری نسبت به بقیه المان ها خواهد داشت و اگر چندین المان با خاصیت position:relative در یک صفحه داشته باشیم، المانی که کد HTML آن نسبت به بقیه المان ها در خط پایین تری نوشته شده باشد الویت بالاتری دارد یعنی روی بقیه قرار می گیرد. همچنین اگر div تو در تو داشته باشیم، اولویت بالا با داخلی ترین div هست.

مثال:

نتیجه:

همانطور که از نتیجه مشخص است div سوم روی div دوم و div دوم روی div اول قرار گرفته است . div دوم  و سوم هر دو relative هستند ولی الویت با div سوم است چون کد html آن پایین تر است.

خاصیت position در css | مثال برای relative

Absolute

وقتی این مقدار را به خاصیت position در css می دهیم یعنی مکان المان با چهار ویژگی (right ,left, bottom و top) نسبت به عنصر والد یا اجدادش که خاصیت position (غیر از static ) دارند تغییر کند. در صورتی که المان با خاصیت absulote ، المان والد یا اجداد با خاصیت position (با مقداری غیر از static) نداشته باشد نسبت به مرورگر تغییر مکان می دهد مشابه relative.

مثال:

توضیح:

در مثال بالا دوتا div داریم که div داخلی با کلاس absolute خاصیت position: absolute را پذیرفته است پس وقتی با ویژگی های right ,left, bottom و top مکان آن را تغییر می دهیم باید نسبت به والد خود که position: relative دارد تغییر مکان دهد.

نتیجه:

خاصیت position در css | نتیجه مثال absolute

همانطور که می بینید متن ” داژیار پردازش ایساتیس” از بالا ۲۰ و از راست ۲۶ پیکسل جابه جا می شود اما نسبت به چی؟نسبت به div اول با خاصیت position:relative .

 

Fixed

 وقتی به یک المان position:fixed می دهیم یعنی المان نسبت به viewport مکانش مشخص شود.شاید بپرسید viewport چیه؟ ویوو پورت نمای قابل نمایش مرورگر است. به بیان ساده تر با این مقدار می توانیم مکان یک المان را ثابت کنیم یعنی حتی با اسکرول هم مکان المان ثابت می ماند.( برای منوها یا سایدبار های چسبان استفاده می شود)

مثال:

توضیح:

در کد بالا سه تا div تعریف کردیم.به div سوم استایل position: fixed  دادیم و با ویژگی top به اندازه ۲۰ پیکسل از بالا فاصله دادیم.حالا با اسکرول خوردن صفحه باید این div ثابت بماند و تغییر مکان ندهد.

نتیجه:

خاصیت position در css | نتیجه مثال fixed

 

یک نکته جالب

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

مثال:

نتیجه:

خاصیت position در css | مثال

حالا برای اینکه این المان را مجبور کنیم که تمام عرض خود را پر کند می توانیم width:100% بدهیم یا دو خصوصیت left و right را صفر بدهیم.

 

خاصیت position در css | مثال

تا همین اندازه آشنایی با خاصیت position در css کافی است .امیدوارم از درس امروز لذت برده باشید.

خلاصه جلسه امروز به شرح زیر می باشد:

خصوصیات
ناممقادیر
توضیح
positionfixed,relative,absolute,staticمشخص کردن تغییر مکان المان نسبت به
topبه صورت درصدی یا عددیفاصله المان از بالا
bottomleft,right,none,bothفاصله المان از پایین
leftleft,right,none,bothفاصله المان از چپ
rightleft,right,none,bothفاصله المان از راست

 


باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 2 امتیاز: 3]