آموزش ویژگی right در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی right در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی right در CSS
با استفاده از ویژگی right
در CSS میتوان موقعیت قرار گیری عناصر را بصورت افقی از سمت راست مشخص و یا تعریف کرد، مثلا میتونیم بگیم فلان عنصر از سمت راست به چپ ۲۰ پیکسل به نسبت باکس والد یا پدرش فاصله داشته باشد.
- اگر از ویژگی position با مقادیر absolute یا fixed استفاده کرده باشید اونوقت ویژگی right یعنی از سمت راست به چپ به نسبت موقعیت قرارگیری پدرش ( که موقعیت پدرش هم relative باشه ) یا اگه پدر مستقیم نداشت، پدربزرگش و اگه پدربزرگ هم نداشت جَدش ( جَد تمامی عناصر میشه تگ body ) مشخص میشود.
- اگر از ویژگی position با مقدار relative استفاده کرده باشید اونوقت ویژگی right یعنی از سمت راست به چپ به نسبت موقعیت اولیه خوده عنصر مشخص میشود.
- اگر از ویژگی position با مقدار sticky استفاده کرده باشید اونوقت ویژگی right یعنی از سمت راست به چپ در هنگامی که یک عنصر چَسبنده باشد.
- اگر از ویژگی position با مقدار static استفاده کرده باشید اونوقت ویژگی right کلا عمل نخواهد کرد و هیچ تاثیری نخواهد داشت.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی right
را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از موقعیت های relative و absolute ( پدر relative و فرزندان absolute به نسبت پدر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
div.pedar{ position:relative; } div.farzand{ position:absolute; right:5px; top:5px; } div.farzand2{ position:absolute; right:5px; bottom:5px; } |
مثال شماره ۲ : مقدار right ، وقتی یک عنصر در موقعیت / Position فیکس ( Fixed ) باشد
1 2 3 4 5 |
div.fixed { position: fixed; right:0; bottom: 10px; } |
مثال شماره ۳ :
1 2 3 4 5 6 7 8 9 10 |
div.f1 { position: relative; } div.f2 { position: absolute; right: 0; top:0; bottom:0; } |
مثال شماره ۴ : استفاده از مقدار منفی
1 2 3 4 5 6 7 8 |
div.f2 { position: absolute; right:-30px; } div.f2:hover{ right:0; } |
Free-Learn
جدول مشخصات ویژگی right در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
مقدار پیش فرض | auto |
---|---|
قابل ارث بری | ندارد | اطلاعات بیشتر |
قابل متحرک سازی | دارد | اطلاعات بیشتر |
نسخه | CSS2 |
نحوه استفاده در جاوااسکریپت | object.style.right=”50px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی right
در CSS پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
right | ۱٫۰ | ۱٫۰ | ۵٫۰ | ۱٫۰ | ۵٫۵ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
1 |
right: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی right در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
مقدار | توضیح |
---|---|
auto | پیش فرض – مرورگرها بصورت خودکار مقدارش را مشخص میکنند |
length | استفاده از واحدهای اندازه گیری همچون px,em و.. ( آموزش واحدهای اندازه گیری در CSS ) ( مقادیر منفی مجاز است ) |
initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- از مقادیر منفی در این ویژگی نیز میتوان استفاده کرد. یک مقدار مثبت عنصر را به سمت چپ حرکت میدهد و مقدار منفی به سمت راست.
- این ویژگی بروی عناصری که موقعیت یا position شان برابر است با static هیچ تاثیری ندارد.