صفت position
با استفاده از صفت position میتوان نوع جا یابی یک عنصر را تعیین کرد.
چهار مقداری متفاوتی که این صفت میتواند داشته باشد عبارت اند از :
- static
- relative
- fixed
- absolute
بعد از مقدار دهی صفت position ، میتوان با استفاده از صفات left ، bottom ،top، و right مکان یک عنصر را تعیین کرد. این صفات در صورتی کار میکنند که در ابتدا صفت position مقدار دهی شده باشد و بسته به نوع مقداری که برای صفت position در نظر گرفته میشود صفات ذکر شده دارای کارکردی متفاوت هستند.
position: static
مقدار پیشفرض صفت position برای همه ی عناصر HTML مقدار static است.
وقتی صفت position دارای مقدار static باشد صفات left ، bottom ،top، و right تاثیری نخواهند داشت.
یک عنصر با مقدار ;position: static به هیچ طریق خاصی جا یابی نمیشود و در این صورت عنصر مورد نظر بر طبق جریان عادی قرارگیری عناصر(عناصر HTML بسته به نوعشان پشت سرهم و یا زیر هم قرار میگیرند) در صفحه جایابی میشود.
این عنصر <div> دارای مقدار ;position: static است.
مثال زیر نحوه ی استفاده از مقدار static برای صفت position را نشان میدهد (البته همانطور که گفته شد static مقدار پیشفرض است و نیاز به مقدار دهی نیست) :
} div.static
; position : static
; border : 3px solid #73AD21
{
position: relative
یک عنصر با مقدار position: relative; نسبت به مکان اولیه آن عنصر جا یابی میشود.
تنظیم صفات left ، bottom ،top، و right برای یک عنصر با مکان relative باعث خواهد شد آن عنصر نسبت به مکان اولیه اش جابه جا شود.
با جابه جایی عنصر مورد نظر ، فضایی خالی در مکان قبلی عنصر ایجاد میشود که توسط عناصر دیگر پر نمیشود.
این عنصر <div> دارای مقدار ;position: relative است.
مثال زیر نحوه ی استفاده از مقدار relative برای صفت position را نشان میدهد :
} div.relative
; position : relative
; left : 30px
; border : 3px solid #73AD21
{
position: fixed
یک عنصر با مقدار ;position: fixed نسبت به صفحه نمایش جا یابی میشود. و این به این معناست که عنصر مورد نظر همیشه در یک مکان ثابت قرار میگیرد و حتی اگر صفحه اسکرول بخورد هم مکانش ثابت است.
در این نوع جا یابی نیز صفات left ، bottom ،top، و right برای مشخص کردن مکان مورد نظر استفاده میشوند.
صفاتی که دارای جا یابی نوع fixed هستند فضایی را در مکان قبلی خود اشغال نمیکنند.
نمونه مثال زیر نحوه ی استفاده از مقدار fixed را نشان میدهد :
} div.fixed
; position : fixed
; bottom : 0
; right : 0
; width : 300px
; border : 3px solid #73AD21
{
position: absolute
یک عنصر با مقدار ;position: absolute نسبت به نزدیک ترین عنصر پدر خود جا یابی میشود.
با این حال اگر یک عنصری که با مقدار مکان absolute مقدار دهی شده است ، عنصر پدر نداشته باشد نسبت به عنصر body در صفحه جا یابی میشود همراه با پیمایش صفحه جابه جا میشود.
نمونه مثال زیر نحوه ی استفاده از مقدار absolute را نشان میدهد :
} div.relative
; position : relative
; width : 400px
; height : 200px
; border : 3px solid #73AD21
{
} div.absolute
; position : absolute
; top : 80px
; right : 0
; width : 200px
; height : 100px
; border : 3px solid #73AD21
{
همپوشانی عناصر
وقتی عناصر جا یابی میشوند و یا به عبارت دیگر مقدار صفت position آنها با مقداری غیر از static مقدار دهی میشود، آنها میتوانند روی هم بیفتند و همدیگر را بپوشانند.
با استفاده از صفت z-index میتوان ترتیب همپوشانی عناصر روی یک دیگر را مشخص کرد.صفت z-index را میتوان با مقادیر مثبت و منفی مقدار دهی کرد. هر چه عنصری مقدار z-index بیشتری نسبت به دیگر عناصر داشته باشد آن عنصر دارای اولویت بیشتری برای در بالا قرار گرفتن دارد.
} img
; position : absolute
; left : 0px
; top : 0px
; z-index : -1
{
نکته : اگر دو عنصری که جایابی شده اند با هم همپوشانی پیدا کنند و برای هیچکدام z-index تعیین نشده باشد، عنصری که در آخر جایابی شده است در بالا قرار میگیرد.
جایابی متون در یک تصویر
هر یک از مثال های زیر نحوه قرار گرفتن متنی را در جهتی مشخص در یک تصویر نشان میدهند :
بالا سمت چپ :
} container.
; position : relative
{
}topleft.
; position : absolute
; top : 8px
; left : 16px
; font-size : 18px
{
بالا سمت راست :
} container.
; position : relative
{
} topright.
; position : absolute
; top : 8px
; right : 16px
; font-size : 18px
{
پایین سمت چپ :
} container.
; position : relative
{
} bottomleft.
; position : absolute
; bottom : 8px
; left : 16px
; font-size : 18px
{
پایین سمت راست :
} container.
; position : relative
{
} bottomright.
; position : absolute
; bottom : 8px
; right : 16px
; font-size : 18px
{
مرکز :
} container.
; position : relative
{
} center.
; position : absolute
; left : 0
; top : 50%
; width : 100%
; text-align : center
; font-size : 18px
{
منبع:learnsource