سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته به کار با ویژگی pointer-events پرداختیم؛ این ویژگی نشان می دهد که آیا یک عنصر در برابر pointer events واکنش نشان می دهد یا خیر.
جلسه فعلی را به آموزش کار با ویژگی position در CSS اختصاص داده ایم.
آموزش کار با ویژگی position در CSS
به مثال زیر توجه نمایید؛ در این مثال یک عنصر <h2> جایگذاری شده است.
مثال :
| h2 { position: absolute; left: 100px; top: 150px; } |
تعریف و کاربرد
ویژگی position متود های جایگذاری استفاده شده برای یک عنصر را از قبیل : static, relative, absolute, fixed یا sticky را مشخص می کند.
| مقدار پیش فرض | auto |
| به ارث بردن | بله |
| متحرک بودن | خیر |
| نسخه | CSS3 |
| سینتکس JavaScript | “object.style.pointerEvents=”none |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی position در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| position | ۱٫۰ | ۱٫۰ | ۹٫۰ | ۱٫۰ | ۷٫۰ |
نکته
مقدار sticky در Internet Explorer یا Edge 15 و نسخه های قبلی پشتیبانی نمی شود.
سینتکس CSS
مثال :
| position: static|absolute|fixed|relative|sticky|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
| static | پیش فرض است – عناصرهمان طور که در جریان سند یا document flow قرار می گیرند به ترتیب رندر می شوند. |
| absolute | مقدار absolute جایگذاری عنصر را بر اساس عنصر ancestor آن انجام می دهد. |
| fixed | عنصر را بر اساس ارتباط با پنجره مرورگر جایگذاری می کند. |
| relative | عنصر بر اساس موقعیت نرم خودش جایگذاری می شود. لذا مقدار “left:20px” سبب افزوده شدن ۲۰ پیکسل به LEFT position می شود. |
| sticky | جایگذاری عنصر بر اساس موقعیت پیمایش کاربر تعیین می شود. یک عنصر sticky بسته به موقعیت پیمایش، بین نسبی و ثابت بودن تغییر می کند. این موقعیت نسبتاً پایدار است تا زمانی که یک offset position داده شده در viewport مشاهده شود – و سبب شود sticks شدن شود. مانند position:fixed نکته : در IE / Edge 15 یا نسخه های قبل تر از آن پشتیبانی نمی شود. در Safari از نسخه ۶٫۱ با پیشوند -webkit پشتیبانی می شود. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
جایگذاری یک عنصر نسبت به موقعیت عادی آن :
مثال :
| h2.pos_left { position: relative; left: -20px; } h2.pos_right { position: relative; left: 20px; } |
مثال دو
جایگذاری های بیشتر :
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #parent1 { position: static; border: 1px solid blue; width: 300px; height: 100px; } #child1 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } #parent2 { position: relative; border: 1px solid blue; width: 300px; height: 100px; } #child2 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } |
کلام آخر
این جلسه را به آموزش کار با ویژگی position در CSS اختصاص دادیم؛ این ویژگی متود های جایگذاری استفاده شده برای یک عنصر را از قبیل : static, relative, absolute, fixed یا sticky را مشخص می کند.
در جلسه بعدی آموزش کار با ویژگی quotes را رائه می نماییم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
