این پوزیشن خیلی چیز مسخره ایه :) ینی داکیومنت ها همیشه جوری توضیح میدن که نمیشه فهمید داستان چیه. توی این پست میخوام مفصل در مورد این ویژگی حرف بزنم. جوری که بعد از خوندنش یه دمت گرم بهم بگید. بریم که داشته باشیم.
پوزیشن یا به انگلیسی position یه ویژگیه که باهاش میتونیم بگیم المنت مورد نظر ما چجوری توی صفحه قرار بگیره. مقادیری که میگیره اینا هستن. این ترتیبی که نوشتم از آسون به سخته که میخوام توضیح بدم.
پوزیشن استاتیک میگه آقا هر چی سر جای خودش باشه و ویژگی ها که در پایین لیست میکنم اصلا توش فعال نیستن. توی این حالت اگه میخواید یه المنت رو از بالا فاصله بدید مثلا میتونید از margin-top استفاده کنید.
فرض کنید جهت المنت پدر یسری المنت چپ به راسته. توی این حالت هر چی بریزی توش اگه بلاک لول باشن که زیر هم میان و اگه اینلاین لول باشن که کنار هم میان و برای جدا کردن از هم و اینور اونور کردن هم باید با مارجین و... سر کنید. خیلی جاها همین کافیه ولی نه همه جا. حالا بعدی ها رو ببنید شاید درک راحتتری از همینم داشته باشید.
پوزیشن فیکس از اسمش مشخصه، میاد یه المنت رو به view port فیکس میکنه. ینی اگر اسکرول هم کنید اون المنت سر جای خودش میمونه و اصلا یجورایی تداخلی با المنت های توی صفحه نداره. با فیکس کردن پوزیشن یه المنت میتونید از ویژگی های top و... استفاده کنید. با تاپ، باتم، رایت و لفت مشخص میکنید که از هر دیوار view port چقد فاصله داشته باشن و با z-index هم موقعیت از لحاظ z رو مشخص میکنید. سخت گفتم آخری رو ولی میدونم که میدونید چی گفتم.
اگه بخوام چنتا از کاربردهای پوزیشن فیکس توی CSS اشاره کنم شاید اولین چیزی که به ذهنم برسه منوی های بالای سایت ها هست که بعضی وقتا دوست داریم منو با پایین اومدن همچنان در دسترس باشه و کاربر بتونه نویگیت کنه. توی این حالت از این پوزیشن استفاده میکنیم. یسریا دکمه ی چت پشتیبانی رو اون گوشه ی پایین فیکس میکنن. یسری ها هدر های جداول رو فیکس میکنن و کلی مثال دیگه.
نکته: یادتون باشه وقتی پوزیشن fixed میشه ویژگی های درصدی مثل width و height با کل view port محاسبه میشن و دیگه ربطی به المنت پدر ندارن.
از اسم این نوع پوزیشن میتونید حدس بزنید که احتمالا المنت در یه جایی از صفحه میچسبه و میمونه. آره. المنت های این نوع پوزیشن به شرطی مثل فیکس عمل میکنن که کاربر اسکرول کرده باشه و اون المنت از صفحه خارج شده باشه. به عنوان یه مثال خیلی مرسوم از این پوزیشن میتونیم به منوی های بالای سایت که در بالا وسط صفحه هستن ولی وقتی صفحه اسکرول میشه میمونن وسط صفحه. وقتی پوزیشن رو sticky میکنید باید بگید که وقتی استیک شد از بالا چقد فاصله داشته باشه و اونو با top میتونید بگید. همینطور مثلا با z-index میتونید بگید که کدوم روی اونیکی بیفته.
خب میرسیم به جاهای حساس. البته این نوع پوزیشن هم سخت نیست. خیلی راحت اگه بخوام تعریف کنم این پوزیشن میگه المنت من نسبت به حالت عادی خودش چه پوزیشنی داشته باشه؟ ینی فرض میکنیم پوزیشن همون static هست و توی جایی که باید باشه هست. حالا اگه پوزیشن رو relative کنیم میتونیم با top و left و... نسبت به اون پوزیشن اصلی جابجاش کنیم. این عکس رو از یه پست وبلاگ توی مدیوم ورداشتم که میشه فهمید چی گفته.
توی این عکس پوزیشن سه تا کادر قرمز استاتیک میتونه باشه و سبزه relative و از بالا و چپ یه فاصله ای خورده. ینی وقتی پوزیشن relative هست بقیه ی باکس ها فرض میکنن اون باکس سر جاشه و لایه ها میتونن روی هم بیان طبق چیزی که توی عکس میبینید. دلیل انتخاب اسمش هم حتما بخاطر همین عملکردش بوده. پس این نوع پوزیشن هم خیلی سخت نبود.
فک کنم نکته دار ترینشون همینه. اگه یه المنتی پوزیشنش absolute باشه از جریان نرمال صفحه خارج میشه و دیگران میتونن جاش رو بگیرن. المنتی که پوزیشنش این مقدار هست میره و خودش رو با پدری که پوزیشن غیر استاتیک داره مچ میکنه و یجورایی relative به اون پدره میشه. بازم عکس زیر رو از همون وبلاگ ورداشتم برای روشنگری :)
اینجا سبزه absolute هست و پدرش که میشه همون نقطه چینه پوزیشن غیر استاتیک داره. مثلا همون relative میتونه باشه پوزیشنش و معمولا هم همین هست. با z-index باز میتونیم قرمزه رو بیاریم بالای سبزه.
خیلی کاربرد داره مثلا شما وقتی میخواید روی عکس متن بندازید میتونید پوزیشن متن رو abs کنید که بیفته روی عکس. برای منوهای dropdown برای اینکه منوی دراپ داون دقیقا زیر باتن اصلی بیفته از این پوزیشن استفاده میکنیم و در کل به قول یکی از استاتید هر جایی که لازم هست ازش استفاده کنید :دی
برای درک درست این داستان بهتره جریان صفحه و هیمنطور سطح display المنت ها از لحاظ block یا inline بودن رو هم بدونید. امیدوارم به درد آیندگان بخوره این نوشته :) موفق باشید.
