آموزش ویژگی left در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی left در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی left در CSS
با استفاده از ویژگی left
در CSS میتوان موقعیت قرار گیری عناصر را بصورت افقی از سمت چپ مشخص و یا تعریف کرد، مثلا میتونیم بگیم فلان عنصر از سمت چپ به راست ۲۰ پیکسل به نسبت باکس پدرش فاصله داشته باشد.
- اگر از ویژگی position با مقادیر absolute یا fixed استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست به نسبت موقعیت قرارگیری پدرش ( که موقعیت پدرش هم relative باشه ) یا اگه پدر مستقیم نداشت، پدربزرگش و اگه پدربزرگ هم نداشت جَدش ( جَد تمامی عناصر میشه تگ body ) مشخص میشود.
- اگر از ویژگی position با مقدار relative استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست به نسبت موقعیت اولیه خوده عنصر مشخص میشود.
- اگر از ویژگی position با مقدار sticky استفاده کرده باشید اونوقت ویژگی left یعنی از سمت چپ به راست در هنگامی که یک عنصر چَسبنده باشد.
- اگر از ویژگی position با مقدار static استفاده کرده باشید اونوقت ویژگی left کلا عمل نخواهد کرد و هیچ تاثیری نخواهد داشت.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی left
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در مثال زیر من از فرزند ، پدر ، پدربزرگ و جد استفاده کردم و برای هرکدوم مقدار left مشخصی ایجاد کردم، اگه لطف بفرمائید و مثال را مشاهده نمایید، میبینید که فرزند به نسبت پدرش ، و پدر به نسبت پدربزرگ و پدربزرگ به نسبت جدش که میشه تگ body مشخص شده اند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div.pedarbozorg{ position:relative; left:20px; } div.pedar{ position:absolute; left:20px; } div.pesar{ position:absolute; left:10px; } |
مثال شماره ۲ : استفاده از مقادیر منفی
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
ul.mylist li.item1{ position:relative; left:-90px; } ul.mylist li.item2{ position:relative; left:-90px; } ul.mylist li.item3{ position:relative; left:-90px; } ul.mylist li.item4{ position:relative; left:-90px; } |
Free-Learn
جدول مشخصات ویژگی left در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | auto |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | دارد | اطلاعات بیشتر |
نسخه | CSS2 |
نحوه استفاده در جاوااسکریپت | object.style.left=”50px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی left
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
left | ۱٫۰ | ۱٫۰ | ۵٫۰ | ۱٫۰ | ۵٫۵ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
left: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی left در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
auto | پیش فرض – مرورگرها بصورت خودکار مقدارش را مشخص میکنند |
length | استفاده از واحدهای اندازه گیری همچون px,em و.. ( آموزش واحدهای اندازه گیری در CSS ) ( مقادیر منفی مجاز است ) |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- از مقادیر منفی در این ویژگی نیز میتوان استفاده کرد. یک مقدار مثبت عنصر را به سمت راست حرکت میدهد و مقدار منفی به سمت چپ.
- این ویژگی بروی عناصری که موقعیت یا position شان برابر است با static هیچ تاثیری ندارد.