خانه / آموزش CSS / بخش بیستم- آموزش ویژگی position در css
پشتیبان وب سایت وردپرس
آموزش ویژگی position در css"

تاریخ بروزرسانی: ۵ فروردین ۱۳۹۸ تعداد بازدید : 10 بازدید بدون دیدگاه

بخش بیستم- آموزش ویژگی position در css

قدم قبلی >< قدم بعدی

 

CSS Layout – ویژگی موقعیت یا position 

ویژگی position در css روش موقعیت یابی مورد استفاده برای یک عنصر (static استاتیک،relative نسبی،fixed ثابت،absolute مطلق یا sticky چسبنده) را مشخص می کند.

ویژگی موقعیت یا position 

ویژگی موقعیت، روش مورد استفاده برای تعیین موقعیت که برای یک عنصر استفاده می شود را تعیین می کند.

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

  • static
  • relative
  • fixed
  • absolute
  • sticky

سپس عناصر با استفاده از ویژگی های بالا، پایین، چپ و راست قرار می گیرند. با این حال، این خواص کار نخواهند کرد، مگر اینکه اول ویژگی موقعیت تنظیم شود. آنها نیز بسته به مقدار موقعیت، متفاوت عمل می کنند.

موقعیت:static استاتیک؛

عناصر HTML به طور پیش فرض استاتیک قرار دارند.

عناصر موقعیت ایستا توسط ویژگی های بالا، پایین، چپ و راست تحت تاثیر قرار نمی گیرند.

عنصر با موقعیت: استاتیک؛ در هیچ راهی خاص قرار نگرفته است بلکه همواره با توجه به جریان عادی صفحه نمایش داده می شود:

در اینجا کد CSS ای که مورد استفاده قرار می گیرد، ذکر شده:

مثال :

 

موقعیت: relative نسبی؛

عنصر با موقعیت: نسبی؛ موقعیت نسبت به موقعیت عادی آن است.

تنظیم ویژگی های بالا، راست، پایین و سمت چپ یک عنصر با موقعیت نسبت موجب می شود که آن را از حالت عادی خود دور کند. سایر محتواها برای هر شکاف با عنصر سمت چپ تنظیم نمی شود.

در اینجا کد CSS ای که مورد استفاده قرار می گیرد، ذکر شده:

مثال

 

موقعیت: fixed ثابت؛

عنصر با موقعیت: ثابت؛ نسبت به نمایشگر موقعیتی است که بدین معنی است که همیشه در همان مکان حتی در صورتی که صفحه پیموده شده باقی بماند. خصوصیات بالا، سمت راست، پایین، و چپ برای قرار دادن عنصر استفاده می شود.

یک عنصر ثابت یک شکاف در صفحه ای که در آن معمولا قرار گرفته است را ترک نخواهد کرد.

عنصر ثابت را در گوشه پایین سمت راست صفحه قرار دهید. در اینجا CSS است که مورد استفاده قرار می گیرد:

مثال

 

موقعیت: absolute مطلق؛

عنصر با موقعیت: مطلق؛ نسبت به نزدیکترین اجداد موقعیتی (به جای موقعیت نسبت به نمایشگر، مانند ثابت) قرار گرفته است.

با این حال؛ اگر یک عنصر موقعیت مطلق هیچ اجدادی نداشته باشد، از بدن اسناد استفاده می کند و همراه با پیمایش صفحه حرکت می کند.

نکته: یک عنصر “موقعیت” یکی است که موقعیتی به جز استاتیک است.

در اینجا یک مثال ساده است:

در اینجا کد CSS ای که مورد استفاده قرار می گیرد، ذکر شده:

مثال

موقعیت: sticky چسبنده؛

عنصر با موقعیت: چسبنده؛ بر اساس موقعیت اسکرول کاربر بر اساس موقعیت قرار گرفته است.

یک عنصر چسبنده بین نسبی و ثابت، بسته به موقعیت اسکرول این موقعیت نسبتا پیش می آید تا یک موقعیت افستی مشخص در نمایشگر برداشته شود – سپس آن را “در جای جای” قرار می دهد (مانند موقعیت: ثابت شده).

توجه: اینترنت اکسپلورر، Edge 15 و نسخه های قبلی از موقعیت چسبنده پشتیبانی نمی کند. صفری نیاز به یک prefix -webkit دارد (به مثال زیر مراجعه کنید). شما همچنین باید حداقل یکی از بالا، سمت راست، پایین یا سمت چپ را برای موقعیت چسبناک برای کار مشخص کنید.

در این مثال، عنصر چسبنده به بالای صفحه (top: 0) می رسد، هنگامی که شما به موقعیت اسکرول خود رسیدید.

مثال

عناصر همپوشانی

هنگامی که عناصر قرار می گیرند، می توانند با عناصر دیگر همپوشانی داشته باشند.

مشخصه z-index دستور پشته یک عنصر را مشخص می کند (که عنصر باید در مقابل یا پشت، دیگران قرار گیرد).

یک عنصر میتواند یک پشته مثبت یا منفی داشته باشد:

این یک عنوان است زیرا تصویر دارای یک z-index از -۱ است و در پشت متن قرار می گیرد.
مثال

 

یک عنصر با دستور پشته بیشتر همیشه در مقابل یک عنصر با یک دستور پشته پایین تر است.

توجه: اگر دو عنصر موقعیتی بدون یک شاخص z مشخص شوند، عنصر آخرین کد موجود در کد HTML قرار داده شده در بالا نشان داده می شود.

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=16567


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *