خصوصیت position همونطوری که از اسمش پیداست میاد پوزیشن تمام المان ها رو مشخص میکنه. نحوه قرارگیری اون وسط المان ها ! چند تا پوزیشن داریم توی CSS :
static
relative
fixed
absolute
sticky
بعد از اینکه پوزیشن رو ست کردیم میایم با استفاده از چهارتا جهت top – bottom – left – right تمامی محل قرارگیری المان رو ایجاد می کنیم و میگیم که المان کجا قرار بگیره . البته بستگی به نحوه تعریف position متفاوت هست استفاده از این قابلیت !
پوزیشن static
المان های html معمولا بر اساس این پوزیش بصورت پیش فرض تعریف می شوند. این نوع پوزیشن هیچ نوع تاثیری از top – bottom left و right نمی گیرد. جای گیری خاصی در صفحه نداره و معمولا از خود روال صفحه تبعیت می کنه !
div.static {
position: static;
border: 3px solid #73AD21;
}
پوزیشن relative
این نوع position بر اساس نحوه پوزیشن دیفالت خودش شکل می گیره ! خصوصیت های top bottom left و right روش تاثیر میذارن و بر اساس مقادیری که میدیم جا به جا میشه .
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
پوزیشن fixed
این نوع پوزیشن هم بر اساس viewport تنظیم میشه و با اسکرول جاش ثابت میمونه و با خصوصیت های top – bottom – left و right محل قرار گیری اون مشخص میشه . مثلا اگر بخوایم المان رو جوری تنظیم کنیم که بیاد پایین سمت راست صفحه قرار بگیره از کد زیر استفاده می کنیم :
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
پوزیشن 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;
}
پوزیشن sticky
این نوع پوزیشن بر اساس اسکرول کردن کاربر خودش رو تنظیم میکنه . یه جورایی میاد خودش رو بر اساس دو نوع پوزیشن relative و fixed تنظیم میکنه و تغییر میده ! تا جایی که کاربر اسکرول میکنه تا برسه به اون المان نوع position اون relative هست و وقتی بهش برسیم خودش رو میزنه به position در مقدار fixed
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
