این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.
آموزش ویژگی left در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی left در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی left در CSS
با استفاده از ویژگی left در CSS میتوان موقعیت قرار گیری تگ هارو بصورت افقی از سمت چپ مشخص و یا تعریف کرد، مثلا میتونیم بگیم فلان عنصر از سمت چپ به راست ۲۰ پیکسل به نسبت باکس پدرش فاصله داشته باشد.
- اگر از ویژگی position با مقادیر absolute یا fixed استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست به نسبت موقعیت قرارگیری پدرش ( که موقعیت پدرش هم relative باشه ) یا اگه پدر مستقیم نداشت، پدربزرگش و اگه پدربزرگ هم نداشت جَدش ( جَد تمامی عناصر میشه تگ body ) مشخص میشود.
- اگر از ویژگی position با مقدار relative استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست به نسبت موقعیت اولیه خوده عنصر مشخص میشود.
- اگر از ویژگی position با مقدار sticky استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست در هنگامی که یک عنصر چَسبنده باشد.
ویژگی left فقط در صورتی عمل میکند که موقعیت یا Position یک عنصر یکی از مقادیر absolute یا fixed یا relative و یا sticky باشد، در غیراینصورت این ویژگی عمل نخواهد کرد.
ویژگی left بروی موقعیت یا پوزیشِن static هیچ تاثیری ندارد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی left را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در مثال زیر من کاری کردم که شما بتونید بطور کامل متوجه عملکرد این ویژگی بشید. در مثال زیر هر باکس به نسبت باکس پدر خودش از سمت چپ فاصله مشخصی داره ( تموم شد رفت ، همین ویژگی left هستش که داره از سمت چپ فاصله ایجاد میکنه )
|
1 2 3 4 |
.PedarBozorg{ position: absolute; left: 20px; } |
مثال شماره ۲ : استفاده از مقدار منفی
|
1 2 3 4 |
ul.MyList li{ position: relative; left: -50px; } |
Free-Learn
جدول مشخصات ویژگی left در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.left=”50px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی left در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| left | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
left: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی left در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – مرورگرها بصورت خودکار مقدارش را مشخص میکنند |
| length | استفاده از واحدهای اندازه گیری همچون PX و.. ( آموزش واحدهای اندازه گیری در CSS ) ( مقادیر منفی مجاز است ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- از مقادیر منفی در این ویژگی نیز میتوان استفاده کرد. یک مقدار مثبت عنصر را به سمت راست حرکت میدهد و مقدار منفی به سمت چپ.
- این ویژگی فقط روی تگ هایی که Position شون برابر است با absolute یا fixed یا relative و یا sticky عمل میکند.
