آموزش ویژگی position در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی position در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی position در CSS
با استفاده از ویژگی position
در CSS میتوان موقعیت ( پوزِیشن ) / Position یا محل قرار گیری یک عنصر را در صفحه مشخص و یا تعریف کرد.
که این موقعیت یا پوزیشن میتواند یکی از موارد زیر باشد :
- Absolute : موقعیت ثابت به نسبت عنصر پدرش
- Fixed : موقعیت فیکس در همه حال
- Relative : موقعیت نسبی نسبت به محل اولیه عنصر
- Sticky : موقعیت چسبیده
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 پشتیبانی نمیشود.