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

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

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

Free-Learn

ویژگی position در CSS

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

که این موقعیت یا پوزیشن میتواند یکی از موارد زیر باشد :

  • Absolute : موقعیت ثابت به نسبت عنصر پدرش
  • Fixed : موقعیت فیکس در همه حال
  • Relative : موقعیت نسبی نسبت به محل اولیه عنصر
  • Sticky : موقعیت چسبیده

موقعیت Sticky در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.

Free-Learn

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

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

مثال شماره ۱ : استفاده از مقدار Relative ( عنصر پدر ) و Absolute ( عنصر فرزند )

امتحان کنید

مثال شماره ۲ : استفاده از مقدار Fixed

امتحان کنید

مثال شماره ۲ : استفاده از مقدار Sticky

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
position ۱٫۰ ۱٫۰ ۴٫۰ ۳٫۱ ۷٫۰

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

مقدار توضیح
static پیش فرض – عنصر هیچ موقعیتی نمیگیرد و بصورت عادی در صفحه قرار میگیرد
ویژگی های left و right و top و bottom و z-index بروی این عناصر هیچ اثری نخواهد داشت
absolute موقعیت یک عنصر به نسبت پدرش ثابت می باشد
fixed عنصر نسبت به کل صفحه نمایش / صفحه ی مرورگر ثابت یا فیکس می باشد
relative شبیه به static می باشد
ولی ویژگی های left و right و top و bottom و z-index بروی این عناصر اثر میگذارد
sticky موقعیت یک عنصر از یک نقطه ای به بعد چسبنده میشود
مثال ( از بالا به سقف مرورگر می چسبد )

مثال ( از پایین به کف مرورگر می چسبد )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

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

  • مقدار sticky در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.

Free-Learn

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