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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی bottom در CSS با من همراه باشید.

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

Free-Learn

ویژگی bottom در CSS

با استفاده از ویژگی bottom در CSS میتوان موقعیت یا پوزیشِن یا Position یک عنصر را در سمت پایین ( bottom ) یک صفحه وب ( یا صفحه نمایش ) به نسبت Position عنصر پدر یا والدش مشخص کرد.

  • اگر مقدار ویژگی Position برابر بود با absolute یا fixed ، اونوقت ویژگی bottom یعنی فاصله بین لبه پایین خوده عنصر تا لبه پایین عنصر پدر
  • اگر مقدار ویژگی Position برابر بود با relative ، اونوقت ویژگی bottom یعنی فاصله بین لبه پایین خوده عنصر تا موقعیت اولیه خوده عنصر
  • اگر مقدار ویژگی Position برابر بود با Sticky ، اونوقت ویژگی bottom یعنی فاصله بین لبه پایین خوده عنصر تا اون محلی که قرار است چسبنده شود

ویژگی Bottom تنها و فقط در صورتی عمل میکند که موقعیت یا Position یک عنصر یکی از مقادیر absolute یا fixed یا relative و یا sticky باشد، در غیراینصورت این ویژگی هیچ تاثیری بروی عنصر نخواهد داشت.

ویژگی Bottom بروی موقعیت یا پوزیشِن static هیچ تاثیری ندارد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی bottom را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : ویژگی bottom در موقعیت یا پوزیشِن Absolute

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

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

Free-Learn

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

نکته خاصی وجود ندارد فقط همونطور که در ابتدای آموزش اشاره کردم یک عنصر حتما باید Position داشته باشد تا ویژگی bottom بتونه روش تاثیر داشته باشه.

Free-Learn

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