این آموزش در تاریخ ۱۴۰۰/۱۱/۲۵ آپدیت شده است.
آموزش ویژگی top در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی top در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی top در CSS
با استفاده از ویژگی top در CSS میتوان موقعیت یا پوزیشِن یا Position یک عنصر را در سمت بالا ( Top ) به نسبت Position عنصر پدر یا والدش مشخص کرد.
- اگر مقدار ویژگی Position برابر بود با absolute یا fixed ، اونوقت ویژگی top یعنی فاصله بین لبه بالای خوده عنصر تا لبه بالای عنصر پدر
- اگر مقدار ویژگی Position برابر بود با relative ، اونوقت ویژگی top یعنی فاصله بین لبه بالای خوده عنصر تا موقعیت اولیه خوده عنصر
- اگر مقدار ویژگی Position برابر بود با Sticky ، اونوقت ویژگی top یعنی فاصله بین لبه بالای خوده عنصر تا اون محلی که قرار است چسبنده شود
ویژگی top تنها و فقط در صورتی عمل میکند که موقعیت یا Position یک عنصر یکی از مقادیر absolute یا fixed یا relative و یا sticky باشد، در غیراینصورت این ویژگی هیچ تاثیری بروی عنصر نخواهد داشت.
ویژگی top بروی موقعیت یا پوزیشِن static هیچ تاثیری ندارد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی top را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : ویژگی top در موقعیت یا پوزیشِن Absolute
|
1 2 3 4 5 6 7 8 9 10 |
.Pedar { position: relative; } .Farzand { position: absolute; left: 0; right: 0; top: 10px; } |
مثال شماره ۲ : ویژگی top در موقعیت یا پوزیشِن Fixed ( مثلا باهاش میتونیم منو رو به سقف مرورگر بچسبونیم )
|
1 2 3 4 |
ul.MyMenu{ position: fixed; top: 0; } |
مثال شماره ۳ : ویژگی top در موقعیت یا پوزیشِن Sticky
|
1 2 3 4 |
ul.MyMenu{ position: sticky; top: 0; } |
Free-Learn
جدول مشخصات ویژگی top در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.top=”۱۰px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی top در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| top | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
top: auto|length|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی top در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – مرورگرها بصورت خودکار خودشون مشخص میکنند |
| length | استفاده از واحدهای اندازه گیری مثه PX و… مقادیر منفی مجاز می باشد ( آموزش واحدهای اندازه گیری در CSS ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- یک عنصر حتما باید Position داشته باشد تا ویژگی top بتونه روش تاثیر داشته باشه.
- بهمراه این ویژگی ، معمولا ویژگی های bottom و left و right نیز مورد استفاده قرار میگیرد.
