cssblog.ir logo
P

position

تعیین موقعیت عناصر از چهار جهت

این مشخصه CSS تعیین می‌کند که عنصرها به نسبت یکدیگر به چه شکل قرار بگیرند و از چهار جهت بالا، راست، پایین، چپ عناصر را موقعیت‌دهی می‌نماید

در این پست قصد دارم تا درباره یکی از کلیدی ترین چیزهایی که همه توسعه دهندگان CSS باید بدانند، صحبت کنم. یکی از مقدادیری که می توان به مشخصه position داد مقدار absolute است. 

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

همانطور که می دانید در CSS ما مشخصه هایی برای موقعیت دهی مانند top, right, bottom, left داریم که برای این ساخته شده‌اند که یک عنصر را بتوان از ۴ جهت مختلف موقعیت‌دهی نمود. در حالت عادی اگر ما مانند مثال زیر:

.cssblog {
	top: 10px;
	left: 20px;
}

.box {
	top: 30%;
	right: 10%;
}

.box-2 {
	bottom: 40px;
	right: 10%;
}

به یک عنصر موقعیت دهی کنیم هیچ کدام از این موقعیت ها کار نخواهد کرد. چونکه لازمه موقعیت دهی به عناصر داشتن یک position مشخص است. مقادیر خاصی که position  قبول می‌کند مطابق جدول زیر است:

معنی مقدار
نسبی relative
مطلق absolute
تعیین شده fixed
راکد static
ارث بری inherit

موقعیت دهی Static (راکد)

این موقعیت دهی همان حالت پیشفرض تمام عناصر می باشد. یعنی بدون هیچ موقعیت دهی و همان جایی که در حالت عادی هستند. 

همانطور که مشاهده می کنید این موقعیت دهی مانند position عادی عناصر است و تفاوتی ایجاد ننموده است. 

موقعیت دهی Relative (نسبی)

در موقعیت دهی نسبی عنصر در محل اصلی خود باقی می ماند (مانند موقعیت static) با این تفاوت که می توانیم از جهات های top,right,bottom,left آن را موقعیت دهی کنیم و همچنین می توانیم از z-index برای آن عنصر استفاده کنیم.

موقعیت دهی Absolute (مطلق)

با دادن این مقدار عنصر از جریان (flow) صفحه جدا شده و  مانند relative می توانیم با استفاده از مشخصه های top, right, bottom, left به عناصر موقعیت دهی کنیم. مثلا وقتی می خواهیم بگویم این عنصر باید نسبت به بالا ۱۰ پیکسل و نسبت به سمت چپ ۱۰ پیکسل فاصله داشته باشد از این مشخصه می‌توانیم استفاده کنیم. مقادیری که به عناصر مطلق داده می‌شود به نسبت اولین والد غیر استاتیک (یعنی relative یا absolute یا fixed) محاسبه می شود. این جمله آخر را حتما و حتما توصیه می‌کنم چندبار بخوانید و مطمئن شوید در خاطرتان مانده است چراکه CSS های نوشته شده زیادی بوده که با دیدن بعضی قسمت های آنان متوجه شده‌ام نویسنده آنان اطلاعی از این موضوع نداشته است و به همین دلیل از راه سخت دیگری به نتیجه رسیده است. 

اگر هیچ والدی با موقعیت relative برای آن عنصر وجود نداشته باشد، موقعیتها نسبت به صفحه مرورگر محاسبه خواهد شد. 

مثال های زیر را در نظر بگیرید. 

کشیده شدن عنصر در عرض و ارتفاع والد آن: 

در مثال فوق عنصر داخلی به اندازه ۱۰٪ از کناره‌ها فاصله گرفته است و بدون اینکه به آن عرض یا ارتفاعی داده شده باشد مابقی فضا را گرفته است.  (در واقع عرض و ارتفاع عنصر داخلی برابر با ۸۰٪ عرض والد آن است)

نکته بسیار مهم درباره این موقعیت دهی این است که این نوع موقعیت دهی همانند float جاذبه را از بین می برد. یعنی اینکه عنصری که موقعیت absolute دارد دیگر عناصر زیرین خود را به پایین هُل نمی دهد. مثال:

موقعیت دهی Fix (ثابت)

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

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

چنین استایلی را شما در برخی وبسایت‌ها تحت عنوان «بنر شناور» یا «بنر گوشه‌ای» مشاهده می‌نمائید که یک بنر تبلیغاتی در گوشه ای  از وبسایت قرار گرفته است و هرمقدار که اسکرول صفحه جابجا شود در همانجا باقی می ماند. 

مقدار Inherit

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

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

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند