آموزش ویژگی position در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی position در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی position در CSS
با استفاده از ویژگی position در CSS میتوان موقعیت ( پوزِیشن ) / Position یا محل قرار گیری یک عنصر را در صفحه مشخص و یا تعریف کرد.
که این موقعیت یا پوزیشن میتواند یکی از موارد زیر باشد :
- Absolute : موقعیت ثابت به نسبت عنصر پدرش
- Fixed : موقعیت فیکس در همه حال
- Relative : موقعیت نسبی نسبت به محل اولیه عنصر
- Sticky : موقعیت چسبیده
موقعیت Sticky در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی position را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از مقدار Relative ( عنصر پدر ) و Absolute ( عنصر فرزند )
|
1 2 3 4 5 6 7 8 9 10 |
div.pedar{ position:relative; } div.farzand{ position:absolute; bottom: 0; left: 0; right: 0; } |
مثال شماره ۲ : استفاده از مقدار Fixed
|
1 2 3 4 5 |
div.mybox{ position:fixed; left:10px; bottom:10px; } |
مثال شماره ۲ : استفاده از مقدار Sticky
|
1 2 3 4 |
p.mybox{ position:sticky; top:0; } |
Free-Learn
جدول مشخصات ویژگی position در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | static |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.position=”absolute”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی position در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| position | ۱٫۰ | ۱٫۰ | ۴٫۰ | ۳٫۱ | ۷٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
position: static|absolute|fixed|relative|sticky|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی position در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||
|---|---|---|---|---|---|
| static | پیش فرض – عنصر هیچ موقعیتی نمیگیرد و بصورت عادی در صفحه قرار میگیرد ویژگی های left و right و top و bottom و z-index بروی این عناصر هیچ اثری نخواهد داشت |
||||
| absolute | موقعیت یک عنصر به نسبت پدرش ثابت می باشد | ||||
| fixed | عنصر نسبت به کل صفحه نمایش / صفحه ی مرورگر ثابت یا فیکس می باشد | ||||
| relative | شبیه به static می باشد ولی ویژگی های left و right و top و bottom و z-index بروی این عناصر اثر میگذارد |
||||
| sticky | موقعیت یک عنصر از یک نقطه ای به بعد چسبنده میشود مثال ( از بالا به سقف مرورگر می چسبد )
مثال ( از پایین به کف مرورگر می چسبد )
|
||||
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر | ||||
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقدار sticky در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.
