این آموزش در تاریخ ۱۴۰۰/۱۱/۱۲ آپدیت شده است.
آموزش ویژگی 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 |
.Pedar { position: relative; } .Farzand { position: absolute; } |
مثال شماره ۲ : فیکس کردن عکس در پایین گوشه سمت چپ
|
1 2 3 4 5 |
.MyImage{ position: fixed; bottom: 10px; left: 5px; } |
مثال شماره ۳ : فیکس کردن منو در بالای صفحه
|
1 2 3 4 |
ul.MyMenu{ position: fixed; top: 0; } |
مثال شماره ۴ : وقتی اسکرول میکنیم بسمت پایین، منو به سقف مرورگر میچسبه
|
1 2 3 4 |
ul.MyMenu{ position: sticky; top: 0; } |
Free-Learn
جدول مشخصات ویژگی position در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | static |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.position=”absolute”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی position در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| position | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
position: static|absolute|fixed|relative|sticky|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی position در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||
|---|---|---|---|---|---|
| static | مقدار پیش فرض همه تگ ها بصورت پیش فرض این موقعیت رو دارن |
||||
| absolute | موقعیت یک عنصر به نسبت پدرش مشخص میشود | ||||
| fixed | عنصر نسبت به کل صفحه نمایش / صفحه ی مرورگر ثابت یا فیکس می باشد | ||||
| relative | شبیه به static می باشد ولی ویژگی های left و right و top و bottom و z-index بروی این موقعیت اثر میگذارد |
||||
| sticky | موقعیت یک عنصر از یک نقطه ای به بعد چسبنده میشود مثال ( از بالا به سقف مرورگر می چسبد )
مثال ( از پایین به کف مرورگر می چسبد )
|
||||
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر | ||||
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- بصورت پیش فرض همه تگ ها، موقعیت static دارند و عملا ویژگی های left و right و top و bottom و z-index بروی این موقعیت هیچ اثری نخواهند داشت.
- ویژگی های left و right و top و bottom و z-index بروی موقعیت های relative و absolute و sticky و fixed اثر دارند.
- موقعیت fixed تگ رو در همه حال فیکس و ثابت میکنه ، و معمولا از این موقعیت برای دکمه های برو به بالای صفحه یا مثلا باکس های تبلیغاتی که در گوشه های سمت چپ و راست یا بالا و پایین سایت ها هستش استفاده میشه و…
- موقعیت sticky هم میتونه یه تگ رو در مکان مشخص شده ای به مرورگر بچسبونه، مثلا وقتی اسکرول میکنیم میایم پایین منو به سقف مرورگر بچسبه، یا مثلا میتونیم کاری کنیم که وقتی اسکرول شد بسمت پاییین، هدر جدول به سقف مرورگر بچسبه و…
