با ویژگی position می توان محل نمایش عناصر را مشخص کرد
 همچنین می توان عناصر را زیر یا روی عناصر دیگر قرار داد
 و نیز تعیین کرد اگر اندازه یک عنصر بیش از اندازه بزرگ است چه باید کرد
 محل قرار گیری عناصر در صفحه وب را می توان با ویژگیهای top, bottom, left, و right مشخص کرد
 اما دقت داشته باشید که اگر مقدار ویژگی position را مشخص نکنید ، نمی توانید از top, bottom, left, وright  استفاده کنید
 از طرف دیگر ویژگیهای top, bottom, left, and right متناسب با مقداری که در ویژگی position قرار کی دهید ، عملکرد متفاوت دارند
 
تعیین محل بصورت static
 به صورت پیش فرض عناصر در صفحه html بصورت استاتیک قرار می گیرند یعنی اینکه هر عنصر بصورت طبیعی بعد از عنصر دیگر یعنی زیر ان قرار می گیرد
 برای قرار دادن عناصر بصورت استاتیک در صفحه مسلما نیازی به استفاده از ویژگیهای تعیین محل عنصر یعنی top, bottom, left, و right نیست
تعیین محل عناصر بصورت Fixed
 تعیین محل عناصر در صفحه وب بصورت Fixed یعنی تعیین محل عناصر صفحه وب متناسب با پنجره مرورگر
 یعنی اینکه حتی اگر پنجره مرورگر را اسکرول کنید ، جای عناصر تغییر نمی کند
 شما گاهی در صفحات وب دیده اید که با اسکرول کردن پنجره مرورگر ، همه محتویا صفحه اسکرول میشن جز  یک عکس یا متنی که  همیشه با شما می ماند ! این همونه
 برای این کار مقدار ویژگی position باید fixed باشه و بعدش محل عنصر که می خواین ثابت باشه با ویژگیهای top , left , right , bottom مشخص کنین
 مثال :
 p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
 مشاهده و اجرای برنامه کامل
 نکته : مرورگرهای ie7 , ie8 تنها در صورتی از ویژگی position برابر fixed پشتیبانی می کنند که شما حتما نسخه برنامه تان را با تگ !DOCTYPE مشخص کرده باشین
 پس فهمیدیم که عناصر با ویزگی fixed می توانند روی سایر محتویات صفحه قرار گیرد
  بصورت پیش فرض هر عنصری در صفحه وب بعد از عنصر دیگر قرار می گیرد وقتی شما به حالت fixed عنصری را جا به جا می کنید ، محل اصلی ان در صفحه که بعد از عنصر قبلی بوده از بین می رود 
تعیین محل عناصر بصورت نسبی یا Relative

 با این مقدار شما می توانید محل جدید عنصر را بصورت نسبی نسبت به محل اصلی و پیش فرضش  اش در صفحه مشخص کنید

مثلا از بالا 20 واحد نسبت به محل پیش فرضش در صفحه یا 30 پیکسل از راست محل پیش فرضش در صفحه

 
 مثال
 h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
 مشاهده و اجرای برنامه کامل
 با این ترتیب شما می توانید عناصر را روی عناصر دیگر قرار دهید
 اما باید توجه داشته باشید که :
 بصورت پیش فرض هر عنصری در صفحه وب بعد از عنصر دیگر قرار می گیرد وقتی شما به حالت relative عنصری را جا به جا می کنید ، محل اصلی ان در صفحه که بعد از عنصر قبلی بوده خالی می ماند
 مثال :
 h2.pos_top
{
position:relative;
top:-50px;
}
 مشاهده و اجرای برنامه کامل
 
تعیین محل عناصر بصورت Absolute

 با Absolute می توان محل نمایش عنصر را نسبت به تگ والدش مشخص کرد

یعنی اگر در یک تگ div تگ دیگری به نام p باشد ، محل p نسبت به محل فعلی والدش که تگ div است مشخص می شود

 اگر تگ مورد نظر هیچ تگ والدی نداشت ، محل او نسبت به خود صفحه وب مشخص می شود
 مثال :
 
h2
{
position:absolute;
left:100px;
top:150px;
}
 مشاهده و اجرای برنامه کامل
 با مقدار absolute عنصر می تواند هر جایی در صفحه وب قرار گیرد در این مثال محتوای تگ h2 در فاصله 100 پیکسلی از چپ و 150 پیکسلی از سمت بالای صفحه وب قرار می گرد
 همانطور که در مثال بالا دیدید ، محل اصلی نمایش تگ h2 باید قبل از p باشد ولی چون با حالت absolute جای انرا عوض کردیم ، محل اصلی  ان در صفحه از بین رفت و خالی نماند
 با مقدار absolute می توانید عناصری را روی عناصر دیگر قرار دهید
 
قرار دادن عناصر روی هم  با ویژگی z-index
 همانطور که قبلا گفتم ، عناصر بصورت طبیعی یکی بعد از دیگری در صفحه نمایش داده می شوند اما اگر شما بخواهید جای عناصر را تغییر دهید ، می توانید انها را روی هم قرار دهید
 ویژگی z-index ترتیب قرار گیری عناصر روی هم را مشخص می کند  یعنی عنصر باید زیر یا روی عنصر دیگر قرار گیرد
مقدار z-index می تواند مثبت یا منفی باشد
 مثال :
 img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
 مشاهده و اجرای برنامه کامل
 در این مثال ، ابتدا محتوای تگ h1 بعد از ان محتوای تگ img و بعد از ان محتوای تگ p نمایش داده می شود اما ما محل نمایش تصویر را با ویژگیهای top , left تغییر دادیم و با z-index برابر -1 ان را زیر h1 قرار دادیم