right Property
ویژگی right
در CSS موقعیت عنصر را در محور افقی نسب به لبه راست آن تحت تاثیر قرار می دهد. این ویژگی تنها عناصری را که به ویژگی position
آنها مقدار داده شده است را تحت تاثیر قرار می دهد.
ویژگی right
بستگی به نوع position
عنصر عملکرد متفاوتی دارد:
- اگر
position
برابر باabsolute
باشد: ویژگیright
فاصله بین لبه سمت راست عنصر را با لبه سمت راست عنصر والدی که ویژگیposition
آنrelative
است را تعیین می کند. - اگر
position
برابر باrelative
باشد: ویژگیright
فاصله عنصر را به نسبت مکان فعلی آن در محور افقی تعیین می کند. - اگر
position
برابر باsticky
باشد: ویژگیright
مانند حالتrelative
عمل خواهد کرد. - اگر
position
برابر باfixed
باشد: ویژگیright
مانند حالتabsolute
عمل خواهد کرد با این تفاوت که عنصر والد viewport یا محدوده قابل رویت در مرورگر است و عنصر نسبت به آن مکان خود را تعیین می کند. - اگر
position
برابرstatic
باشد: ویژگیright
اثری نخواهد داشت.
نحوه نوشتار
right: 13px; right: 3.3em; right: 40%; right: auto;
مقادیر
واحد طولی
موقعیت عنصر را بر مبنای لبه سمت راست با واحدهای اندازه از قبیل px
, em
و rem
و غیره را تعیین می کند.
درصد
موقعیت عنصر را بر مبنای لبه سمت راست و درصدی از عرض عنصر والد در نظر می گیرد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div class="wrapper1"> <div class="box1"> position: relative <br /> right: -200px; </div> </div> <div class="wrapper2"> position: relative; <div class="box2"> position: absolute <br /> right: 50% </div> </div>
css
.wrapper1, .wrapper2 { height: 100px; background-color: lightgreen; margin-top: 20px; } .box1, .box2 { width: 150px; height: 50px; background-color: pink; position: relative; right: -200px; left: auto; } .wrapper2 { position: relative; } .box2 { position: absolute; right: 50%; top: 0; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.