صفحه اصلی / آموزش CSS / بخش بیستم- آموزش ویژگی position در css

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

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

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

 

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

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

ویژگی موقعیت

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

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

  • استاتیک
  • نسبت فامیلی
  • درست شد
  • مطلق
  • چسبنده

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

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

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

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

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

این عنصر <div> موقعیت دارد: استاتیک؛
در اینجا CSS است که مورد استفاده قرار می گیرد:

مثال
div.static {
موقعیت: استاتیک؛
مرز: ۳px جامد ۷۳AD21؛
}
موقعیت: نسبی؛

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

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

این عنصر <div> دارای موقعیت: نسبی است؛
در اینجا CSS است که مورد استفاده قرار می گیرد:

مثال
div.relative {
موقعیت: نسبی؛
چپ: ۳۰px؛
مرز: ۳px جامد ۷۳AD21؛
}

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

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

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

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

مثال
div.fixed {
موقعیت: ثابت؛
پایین: ۰؛
راست: ۰؛
عرض: ۳۰۰ پیکسل؛
مرز: ۳px جامد ۷۳AD21؛
}
این عنصر <div> موقعیت دارد: ثابت؛

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

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

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

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

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

این عنصر <div> دارای موقعیت: نسبی است؛ این عنصر <div> موقعیت دارد: مطلق؛
در اینجا CSS است که مورد استفاده قرار می گیرد:

مثال
div.relative {

موقعیت: نسبی؛
عرض: ۴۰۰px؛
ارتفاع: ۲۰۰ پیکسل؛
مرز: ۳px جامد ۷۳AD21؛
}

div.absolute {

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

بالا: ۸۰ پیکسل؛
راست: ۰؛
عرض: ۲۰۰ پیکسل؛
ارتفاع: ۱۰۰px؛
مرز: ۳px جامد ۷۳AD21؛
}

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

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

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

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

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

مثال
div.sticky {
موقعیت: -webkit-sticky؛ / * صفری * /
موقعیت: چسبنده؛
بالا: ۰؛
رنگ پس زمینه: سبز؛
مرز: ۲px جامد # ۴CAF50؛
}
عناصر همپوشانی
هنگامی که عناصر قرار می گیرند، می توانند با عناصر دیگر همپوشانی داشته باشند.

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

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

این یک عنوان است زیرا تصویر دارای یک z-index از -۱ است و در پشت متن قرار می گیرد.
مثال
img {
موقعیت: مطلق؛
چپ: ۰px؛
بالا: ۰px؛
z-index: -1؛
}
یک عنصر با دستور پشته بیشتر همیشه در مقابل یک عنصر با یک دستور پشته پایین تر است.

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

 

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

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


منبع مطلب

این مطالب را نیز ببینید!

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

  آموزش ساخت جدول در CSS   ساخت جدول در CSS برای شروع و قبل …

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

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