left Property
ویژگی left
در CSS موقعیت عنصر را در محور افقی و از سمت چپ آن تعیین. این ویژگی عناصری را که به ویژگی position
آنها مقدار داده شده باشد، تحت تاثیر قرار می دهد.
ویژگی left
بسته به مقدار position
عنصر عملکرد متفاوتی دارد:
- اگر
position
برابر باabsolute
باشد: ویژگیleft
، فاصله بین لبه سمت چپ عنصر تا لبه سمت چپ عنصر والدی که ویژگیposition
آنrelative
است را تعیین می کند. - اگر
position
برابر باrelative
باشد: ویژگیleft
، فاصله عنصر را به نسبت مکان فعلی آن در محور افقی تغییر تعیین می کند. - اگر
position
برابر باsticky
باشد: ویژگیleft
مانند حالتrelative
عمل خواهد کرد. - اگر
position
برابر باfixed
باشد: ویژگیleft
مانند حالتabsolute
عمل خواهد کرد با این تفاوت که عنصر والد، viewport یا محدوده قابل رویت در مرورگر است و عنصر نسبت به آن مکان خود را تعیین می کند. - اگر
position
برابرstatic
باشد: ویژگیleft
تاثیری نخواهد داشت.
نحوه نوشتار
left: 13px; left: 3.3em; left: 12rem left: 40%; left: auto;
مقادیر
واحد طولی
موقعیت عنصر را بر مبنای لبه سمت چپ آن با واحدهای اندازه CSS مانند px
, em
و rem
تعیین می کند.
درصد
موقعیت عنصر را بر مبنای لبه سمت چپ آن و درصدی از عرض عنصر والد تعیین می کند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<div class="wrapper1"> <div class="box1">position: relative <br /> left:50px; </div> </div> <div class="wrapper2"> <div class="box2">position: absolute <br /> left: 50%; </div> </div> <div class="wrapper3"> <div class="wrapper3-1"> position: relative; <div class="pic"></div> <div class="box3">position: sticky <br /> left: 7em; </div> </div> </div>
css
.wrapper1, .wrapper2, .wrapper3 { height: 100px; background-color: lightgreen; margin-top: 20px; } .wrapper3 { height: 250px; overflow-y: scroll; } .wrapper3-1 { height: 500px; position: relative; } .box1, .box2, .box3 { width: 150px; height: 50px; background-color: pink; position: relative; left: 50px; } .wrapper2 { position: relative; } .box2 { position: absolute; left: 50%; top: 0; } .box3 { position: sticky; left: 7em; top: 10px; } .pic { width: 60%; float: right; background-image: url(http://my-project.ir/img/Amazon.jpg); background-repeat: no-repeat; height: 100%; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.