left

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

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

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

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

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

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

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

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

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

 

.container {
  position: relative;
}

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

 

 

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

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

.container {
  position: relative;
}

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

 

 

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

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

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

 

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

 

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

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