position در css ، روش موقعیت دهی به عناصر در صفحه را مشخص می کند؛ که ۵ مقدار برای این ویژگی در css وجود دارد:

static
relative
fixed
absolute
sticky

سپس عناصر با استفاده از ویژگی های چپ، راست، بالا و پائین، در موقعیت خاصی قرار می گیرند. که برای اعمال شدن این ویژگی ها، می بایست ابتدا position تعریف شود؛ آنها همچنین بسته به مقدار position در css ، متفاوت عمل می کنند.

position: static

در حالت پیش فرض، مقدار position در css برابر static می باشد.
هنگامی که مقدار position برابر static باشد، المان ها تحت تأثیر خصوصیات بالا ، پایین ، چپ و راست قرار نمی گیرند و در کل در هیچ جهت بخصوصی قرار نمی گیرند و همیشه از چیدمان کلی صفحه، تبعیت می کنند.
به مثال زیر دقت کنید:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

This <div> element has position: static;

position: relative

یک عنصر با position: relative; نسبت به موقعیت مکانی ابتدایی خودش، جابجا می شود و با دادن خصوصیات top، left، right و bottom این جابجایی اتفاق می افتد.
هنگامی که عنصر تغییر مکان می دهد، جای آن خالی می ماند و عنصر دیگری جایگزین آن نمی شود.
مثال زیر کد سی اس اس مربوطه را نشان می دهد:

div.relative {
  position: relative;
  left: 70px;
  border: 3px solid #73AD21;
}

This <div> element has position: relative;

position: fixed

المانی با مقدار position: fixed; با توجه به صفحه نمایش، در موقعیت خاصی قرار می گیرد. بدین معنی که مکان آن نسبت به صفحه نمایش یکسان است، حتی اگر اسکرول کنیم.
برای تعیین موقعیت المان از خصوصیات top, right, bottom و left استفاده می کنیم.
این المان در مکان قبلی خود فضایی را اشغال نمی کند.
به مثال زیر دقت کنید:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

همان طور که مشاهده می کنید، این مثال، المانی را در گوشه پایین سمت راست صفحه، نمایش می دهد.

This <div> element has position: fixed;

position: absolute

المانی با مقدار position: absolute; نسبت به نزدیک ترین والد خود که موقعیت دهی شده باشد، موقعیت دهی می شود. (نظیر عنصر با ویژگی fixed که نسبت به صفحه نمایش جادهی می شد)
اما اگر المان با مقدار absolute عنصر والد نداشت، نسبت به عنصر body موقعیت یابی می شود و همراه با اسکرول کردن صفحه، جابجا می شود.
به مثال زیر توجه نمایید:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid red;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid green;
}

This <div> element has position: relative;

This <div> element has position: absolute;

position: sticky

المانی با مقدار position: absolute; بر اساس اسکرول کردن کاربر، در موقعیت خاصی قرار می گیرد.
المان sticky بسته به موقعیت اسکرول، به یکی از دو صورت relative یا fixed عمل می کند.
تا قبل از رسیدن اسکرول به المان، این المان به صورت relative عمل می کند و بعد از رسیدن اسکرول، المان به حاشیه صفحه نمایش می چسبد و به صورت fixed عمل می کند.

Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

I am sticky!

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

نکته: Edge 15 ، Internet Explorer و نسخه های قدیمی، ویژگی sticky را پشتیبانی نمی کنند و safari به webkit- prefix- نیاز دارد. (در مثال زیر خواهید دید)
همچنین می بایست یکی از ویژگی های top، right، bottom و left را برایش تعیین کنید تا کار کند.
مثال زیر، نحوه نوشتن کد برای مرورگر سافاری را نشان می دهد که المان sticky هنگام اسکرول، به بالا چسبیده است (top: 0):

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Overlapping Elements

وقتی عناصر موقعیت دهی می شوند، می توانند روی هم قرار بگیرند و همپوشانی داشته باشند.
ویژگی z-index ترتیب قرارگیری عناصر (stack order) را مشخص می کند (که کدام عنصر در رو و کدام یک زیر قرار بگیرند)
که یک المان می تواند مقادیر مثبت و منفی stack order را بگیرد:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

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

نکته: المان با stack order بیشتر در رو و المان با stack order کمتر در زیر قرار می گیرد.
نکته: اگر دو المان که position در css برای آن ها تعریف شده، هم پوشانی داشته باشند و برای آن ها z-index تعریف نشده باشد، المانی که در کد HTML در آخر نوشته شده باشد، رو قرار می گیرد.

position در css ، برای قرار دادن متن روی تصویر

Bottom Left

Top Left

Top Right

Bottom Right

Centered

برای بالا سمت چپ:

.container {
  position: relative;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
img { 
  width: 100%;
  height: auto;
  opacity: 0.5;
}

برای بالا سمت راست:

.container {
  position: relative;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
img { 
  width: 100%;
  height: auto;
  opacity: 0.5;
}

برای پایین سمت راست:

.container {
  position: relative;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
img { 
  width: 100%;
  height: auto;
  opacity: 0.5;
}

برای پایین سمت چپ:

.container {
  position: relative;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
img { 
  width: 100%;
  height: auto;
  opacity: 0.5;
}

و در آخر، برای مرکز:

.container {
  position: relative;
}
.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
img { 
  width: 100%;
  height: auto;
  opacity: 0.5;
}

برگرفته از وب سایت w3schools.com