به کمک نیاز داری؟

گروه کسب و کار ساکوراد
فهرست
آموزش CSS

آموزش CSS | محل قرارگیری عناصر – خواص مربوط به Position

محل قرارگیری عناصر – خواص مربوط به Position در CSS

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

  1. top
  2. bottom
  3. left
  4. right

اعضای شبکه مشاوران در حوزه «برنامه‌نویسی، وب و امنیت سایبری»

مشاور تحقیقات بازار، بازاریابی و فروش

اگر علاقمندید در تراز شرکتهای بزرگ و صاحب‌نام، بخش بازاریابی...

مشاور SEO ،UI/UX و بازاریابی دیجیتال

اگر قصد دارید در دنیای دیجیتال فعالیت کرده و در...

مشاور مسیریابی شغلی، کارآفرینی و استارتاپ

اگر به دنبال موفقیت در کارآفرینی و یا داشتن کسب...

مشاور شبکه، نرم افزار و هوش مصنوعی

اگر به دنبال رفع چالشهای شبکه، نرم‌افزار و امنیت فضای...

مدیر پروژه، مشاور و مالک محصول پروژه‌های ICT

اگر در توسعه UI/UX و مدیریت پروژه‌های ICT خود به...

مشاور مدیریت، برنامه‌ریزی و سئو | مترجم انگلیسی

اگر به دنبال بکارگیری آخرین متدهای جهانی مدیریت منابع انسانی...

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

Static Positioning
تمام عناصر در HTML   در حالت پیش فرض به صورت استاتیک موقعیت دهی شده اند.عناصری که از این ویژگی استفاده میکنند از ویژگی های top  و .. تبعیت نمیکنند.

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

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

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

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute Positioning
مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

h2
{
position:absolute;
left:100px;
top:150px;
}

Overlapping Elements
زمانی که عناصر روی هم قرار میگیرند با این ویژگی میتوانید اولویت نمایش را برای عناصر مشخص کنید

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

z-index فقط در مواقعی که از ویژگیهای زیر استفاده شود، میتواند مورد استفاده قرار گیرد:

position:absolute, position:relative,position:fixed

https://succourad.com/?p=10004
پیشنهاد براساس سلیقه شما

سئوالات و نظرات ارزشمند خود را با ما مطرح کنید

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