صفت position در CSS

با استفاده از صفت position میتوان نوع مکان یابی و یا به عبارتی دیگر نوع جا یابی یک عنصر را تعیین کرد. در این فصل به انواع مقادیری که میتوان برای صفت position به کار برد اشاره میکنیم و با عملکرد آنها آشنا میشویم.


صفت 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: relative نسبت به صفحه نمایش جا یابی میشود. و  این به این معناست که عنصر مورد نظر همیشه در یک مکان ثابت قرار میگیرد و حتی اگر صفحه اسکرول بخورد هم مکانش ثابت است.

در این نوع جا یابی نیز صفات 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;
}
خودتان امتحان کنید

 

منتشر شده در ۲۲ شهریور ۱۳۹۶ حمید رضا ملکی ۷۳۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده