آموزش تعیین موقعیت POSITION در Css

بازدید: 377 بازدید

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

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

در آموزش امروز، و در ادامه آموزش های css با این ویژگی و خاصیت های آن آشنا خواهیم شد.

همراه ما باشید.

باسلام خدمت همراهان همیشگی سایت پرنیان طرح

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

در ادامه همراه ما باشید.

 

مقادیری که POSITION میتواند داشته باشد:

در کل، شما میتواندی 5حالت را برای POSITION تعریف کنید.

این 5حالت عبارتند از :

1-static

2- relative

3- fixed

4- absolute

5- sticky

 

توضیحات موارد بالا:

1- ;position: static : در HTML عناصر به طور پیشفرض دارای این مقدار هستند. این حالت تعریف میکند که عناصر تحت تاثیر بالا،پایین،چپ و راست قرار نمیگیرند. در اینحالت،عنصر دارای مکان ویژه ای نیست و با تغییر صفحه تغییر میکند.

مثال:
[PHP]
div.static {
position: static;
border: 3px solid #73AD21;
}
[/PHP]
نتیجه را ببینید.

 

2-position: relative; در این حالت، عنصر موقعیتی، نسبت به موقعیت عادی خود دارد.یعنی می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد. و یا روی عناصر دیگر قرار گیرد. اما فضای رزرو شده برای عنصر، در جریان عادی صفحه محفوظ می ماند.

مثال:
[PHP]
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
[/PHP]
نتیجه را ببینید.

 

3- position: fixed; عنصری با این خصوصیت در جای خود ثابت می ماند. یعنی نسبت به مختصات صفحه نمایش تعیین موقعیت می شود. و حتی در صورت اسکرول کردن صفحه نیز جا بجا نمی شود.

مثال:

[PHP]
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
[/PHP]
نتیجه را ببینید.

 

4- position: absolute; در اینحالت، عنصر نسبت به عنصر پدرخود موقعیت دهی می شود. این حالت کاملا متفاوت از حالت STATIC است. اما در صورتی که چنین عنصری یافت نشد، عنصر داری این مقدار، از بدنه سند برای موقعیت دهی خود استفاده می کند. یعنی همراه با اسکرول صفحه، تغییر موقعیت می دهد.

مثال:

[PHP]
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;
}
[/PHP]
نتیجه را ببینید.

 

5- position: sticky; مخلوطی از حالت RELATIVE و FIXED است. عنصری که دارای این مقدار است تا وقتی که به نقطه ای از اسکرول برسد، RELATIVE عمل میکند. و بعد از رسیدن به نقطه ی مورد نظر FIXED می شود.

مثال:

[PHP]
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
[/PHP]
نتیجه را ببنید.

Overlapping Elements یا عناصر همپوشاننده

عناصر میتوانند با هم همپوشانی شوند. یعنی روی یکدیگر قرار بگیرند. خاصیت Z-INDEX مشخص میکند کدام عنصر پشت کدام یک قرا بگیرد.این صفت می تواند مقدار مثبت یا منفی بگیرد.

مثال:

[PHP]
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
[/PHP]
نتیجه را ببینید.

در مثال بالا، تصویر دارای مقدار Z-INDEX=-1 است و در پشت نوشته قرار گرفته است.

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

نمونه های بیشتر:

1- تصویر در پشت و نوشته در بالا و چپ تصویر

2- تصویر در پشت و نوشته در مرکز تصویر

3- تصویر در پشت و نوشته در پایین و چپ تصویر

4- تصویر در پشت و نوشته در پایین و راست تصویر

5-تصویر در پشت و نوشته در پایین و راست تصویر

آموزش تنظیمات z-index

 

میخواهم درباره position بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.