right

با استفاده از ویژگی right می توان فاصله لبه راست عناصری که position گرفته اند را از مبداشان تعیین کرد.

برای درک این ویژگی باید با ویژگی position کاملا آشنا باشید.

به ویژگی هایی نظیر right ویژگی های آفست می گویند. دیگر ویژگی های مربوط به آفست عناصر bottom, left, top می باشند.

ویژگی های آفست فقط بر روی عناصری که position دارند تاثیر می گذارند و بر روی عناصر دیگر هیچ گونه تاثیری ندارند. و البته position عنصر هم باید از نوع غیر static باشد.

برای عنصری که حالت position آن relative باشد ویژگی right تعیین کننده فاصله لبه راست عنصر نسبت به مکان اولیه ای که داشته است, می باشد.

اگر حالت عنصر absolute باشد, فاصله لبه راست, نسبت به عنصر پدری که حالت relative دارد تعیین می شود.

برای حالت های fixed و sticky این فاصله از viewport می باشد.

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

 
در مثال زیر لبه راست عنصر 50 پیکسل از لبه راست عنصر نگهدارنده اش فاصله می گیرد:

 

.container {
  position: relative;
}

.absolute-element {
  position: absolute;
  top: -20px;
  right: 50px;
}

 

 

اگر از مقدار درصدی استفاده شود, آن مقدار بر اساس عرض عنصری است که عنصر ما بر اساس آن مکانش تعیین شده است. (توجه کنید که صرفا عنصر پدر, منظور نیست, بلکه شاید عنصری که عنصر ما نسبت به آن مکان می گیرد پدر بزرگش باشد نه پدر آن, شاید هم یکی از اجدادش باشد :) )

 
همانطور که در مثال زیر مشاهده می کنید %100 برای ویژگی right به معنای کل عرض عنصری از پدرانش است که حالت relative دارد:

.container {
  position: relative;
}

.absolute-element {
  position: absolute;
  right: 100%;
  top: 0;
}

 

 

مقدار این ویژگی می تواند inherit نیز باشد. که به این معنی است که می تواند مقدارش را از مقدار عنصر پدرش ارث ببرد تا برابر با آن باشد.

همچنین مقدار right می تواند auto نیز باشد که در این صورت مکان عنصر وابسته به مقدار left خواهد بود. اما اگر مقدار left هم auto باشد, عنصر در راستای افقی, فاصله ای از مکان اولیه اش نخواهد گرفت.

دموی زیر را بررسی کنید:
 

 

See the Pen right by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگر ها

ویژگی right در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.