ویژگی top CSS
- صفحه قبل text-underline-position
- صفحه بعدی transform
تعریف و استفاده
ویژگی top محدوده بالای لبه بیرونی عنصر را مشخص می‌کند. این ویژگی یک تغییر موقعیت در لبه بالای مارجین خارجی عنصر و لبه بالای محتوی قرار می‌دهد.
نکته:اگر مقدار ویژگی position برابر با "static" باشد، تنظیم ویژگی top هیچ اثری نخواهد داشت.
توضیح
برای عنصرهای static، مقدار auto خواهد بود؛ برای مقادیر طول، مقدار مربوطه؛ برای مقادیر درصد، مقدار مشخص شده؛ در غیر این صورت auto خواهد بود.
برای عنصرهای تعریف شده به صورت نسبی، اگر top و bottom هر دو auto باشند، مقدار محاسبه شده هر دو صفر خواهد بود؛ اگر یکی از آن‌ها auto باشد، مقدار معکوس دیگری انتخاب می‌شود؛ اگر هر دو غیر auto باشند، bottom مقدار معکوس top را خواهد گرفت.
لطفاً به:
آموزش CSS:پوزیشن CSS
دستورالعمل HTML DOM:ویژگی top
مثال
محل حاشیه بالا تصویر را 5 پیکسل پایین‌تر از حاشیه بالا عنصر محتوی قرار دهید:
img
{
position:absolute;
top:5px;
}
قوانین CSS
top: auto|length|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش‌فرض. موقعیت حاشیه بالا توسط مرورگر محاسبه می‌شود. |
| % | موقعیت بالا عنصر را بر اساس درصد محیط محاسبه کنید. می‌توان از مقادیر منفی استفاده کرد. |
| length | با استفاده از واحد‌هایی مانند px، cm و غیره، موقعیت بالا عنصر را تنظیم کنید. می‌توان از مقادیر منفی استفاده کرد. |
| inherit | تعیین می‌کند که باید مقدار top از عنصر والد به ارث برسد. |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| وراثت: | no |
| نسخه: | CSS2 |
| قوانین جاوااسکریپت: | object.style.top="50px" |
مثال‌های بیشتر
- استفاده از مقدار ثابت برای تنظیم حاشیه بالا تصویر
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقدار ثابت، حاشیه بالا تصویر را تنظیم کرد.
- استفاده از درصد برای تنظیم حاشیه بالا تصویر
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از درصد، حاشیه بالا تصویر را تنظیم کرد.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را کاملاً پشتیبانی می‌کند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- صفحه قبل text-underline-position
- صفحه بعدی transform
