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

در این بخش از آموزش css به توضیح خواص مربوط به Position می پردازیم.

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

حتما بخوانید: خواص نمایش عناصر Cursor , Display , Visibility

ویژگی Position در عناصر

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

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

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

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

با دریافت « مشاوره برنامه‌نویسی، وب و سئو » از کارشناسان جوان حرفه‌ای و باتجربه ساکوراد؛ موفقیت کسب و کار، رونق فروش و افزایش درآمد خود را تضمین کنید!

و اما کلام آخر…