آموزش ویژگی top در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی 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

امتحان کنید

مثال شماره ۲ : ویژگی top در موقعیت یا پوزیشِن Fixed

امتحان کنید

مثال شماره ۳ : ویژگی top در موقعیت یا پوزیشِن Sticky

امتحان کنید

Free-Learn

جدول مشخصات ویژگی top در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.top=”۱۰px”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی top در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
top ۱٫۰ ۱٫۰ ۶٫۰ ۱٫۰ ۵٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی top در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – مرورگرها بصورت خودکار موقعیت بالای یک عنصر را مشخص میکنند.
length استفاده از واحدهای اندازه گیری (مثله px و..)
مقادیر منفی مجاز می باشد.
( آموزش واحدهای اندازه گیری در CSS )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • یک عنصر حتما باید Position داشته باشد تا ویژگی top بتونه روش تاثیر داشته باشه.
  • بهمراه این ویژگی ، معمولا ویژگی های bottom و left و right نیز مورد استفاده قرار میگیرد.

Free-Learn

دریافت PDF یا پرینت این مطلب