cssblog.ir logo
P

top-right-bottom-left

چهار جهت موقعیت‌دهی

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

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

مثال:

div {
	top: 20px;
	right: 20px;
}

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

روش های مقدار دهی

واحدهای طولی

روش اصلی و پرکاربرد معمولا استفاده از واحدهای طولی در CSS مانند مقادیر پیکسلی، مقادیر نسبی em و rem ، مقادیر درصدی و… می باشد. مثال:

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

کلمه کلیدی auto

این مقدار فاصله از آن جهت را بصورت خودکار تنظیم می کند و در اکثر مواقع این مقدار به معنی «بدون فاصله تعیین شده» می‌باشد.

کلمه کلیدی inherit

این مقدار باعث به ارث بری آن مشخصه از والد خود می شود.

تلاش برای محقق شدن همه چیز

یک نکته جالب درباره این مشخصه‌ها وجود دارد که بهتر است در اینجا به آن اشاره کنم. فرض کنید که عنصری که حالت absoluteدارد از دو جهت top و bottom موقعیت‌دهی شده باشد. مثلا از بالا ۱۰ پیکسل و از پایین هم ۱۰ پیکسل؛ در چنین شرایطی رفتاری که مرورگر نشان می دهد این است که ابتدا عنصر را به نقطه ۱۰ پیکسل از بالا برده و top: 10pxرا اجرا می‌کند. سپس برای اجرای bottom: 10pxعنصر را آنقدر می کشد (stretch) تا فاصله آن از پایین هم به این اندازه شود. مثال:

این رفتار دقیقا برای دو جهت مخالفright وleft نیز صدق می کند.

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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