این مبحث یکی از مباحثی است که حتی اگر شما همین الان هم بخونید ممکنه پنج دقیقه بعد یادتون بره در حالی که بارها و بارها از اون استفاده کردین یا خیلی از مصاحبه های Front-End با این سوال شروع میشه و ممکنه که اون لحظه جملات مرتبی دم دستتون نباشه که به راحتی جواب بدین. امروز در ادامه قصد دارم به این مسئله خاتمه بدم، به همین دلیل سعی می کنم خیلی خلاصه توضیح بدم و هر کدوم از مقدارها رو نشانه گذاری کنم که راحت تر به ذهن سپرده بشه.
به این property مقدار های زیر رو میشه اختصاص داد :
مقدار پیش فرض static هست و با هیچ یک از (top, bottom, left, ,right) جابجا نمی شود و طبق روال معمولی که کل صفحه داره قرار میگیره .
هرچیزی یک پیش فرض داره، پیش فرض position هم static هست. static یعنی ایستا، یعنی تغییر نمیکنه که خب منطقی هم هست وقتی position نداره پس نباید با هیچ یک از (top, bottom, left, ,right) تغییر کنه و باید سرجایی که تعریف شده قرار بگیره.
تنظیم کردن این مقدار باعث میشه المنت بدون توجه به اسکرول شدن صفحه جای خود رو حفظ کنه. مثلا زمانی که بخواهیم بگیم این المنت همیشه گوشه سمت راست صفحه باشه و تغییر نکنه حتی اگر صفحه رو اسکرول کنیم .
مثال بدیهی fixed هم دکمه های هست که همیشه گوشه پایین صفحه ظاهر میشه و شما رو به بالای صفحه منتقل میکنه .
محل قرار گیری المنتی که fixed هست رو میشه با استفاده از (top, bottom, left, ,right) نسبت به کل صفحه (نه المنت های دیگر) مشخص کرد.
برای واضح شدن sticky با مثال شروع میکنم:
این منو هایی که جایی ثابتی دارند ولی به محض اینکه شما صفحه رو به سمت پایین اسکرول می کنید می چسبند به بالای صفحه و دوباره وقتی به سمت بالا بر میگردید جای خودشون قرار میگیرند، مثال خوبی هست که به ذهن بسپارید.
درواقع شما position المنتی رو برابر sticky قرار میدید و براش جایی دیگری نسبت به کل صفحه با (top, bottom, left, ,right) مشخص می کنید ، حالا وقتی ViewPort (کل فضایی که دیده میشه) به اون المنت میرسه سریع میچسبه به جایی که شما براش تعریف کردید.
تقریبا همه ما با سه مقدار بالا مشکلی نداریم، حالا بریم سروقت دو مقدار relative و absolute.
مقداری دهی position با مقدار relative باعث میشه بتونیم با استفاده از (top, bottom, left, ,right) جای المنت رو تغییر بدیم.
سوال مهم اینجاست که جای المنت نسبت به چه چیزی تعیین میشه؟ به عبارت دیگه یعنی وقتی شما position رو relative می کنید و مثلا right را با 10px مقدار دهی می کنید المنت 10px از راست نسبتبب به چه چیزی فاصله می گیرد؟
مقدار relative باعث میشه المنت نسبت به جایی که تعریف شده است جابجا شود.
این مقدار هم مانند relative باعث میشه که بتوانیم با استفاده از (top, bottom, left, ,right) جای المنت رو تغییر بدیم، اما تفاوت اینجاست که absolute بر خلاف relative دیگر نسبت به جایی که تعریف شده است تغییر نمیکند، بلکه نسبت به اولین پدری که مقدار position آن برابر هر چیزی به غیر از static باشد تغییر می کند.
برای مثال :
<div style=”position:relative” name=”1”> <div name=”2”> <p style=”position:absolute; right:10px”>some text</p> </div> </div>
اتفاقی که اینجا افتاده اینه که تگ p نسبت به div یک جابجا میشود نه div دو.
نکته : اگر تگی که absolute هست هیچ پدری نداشته باشد که position گرفته باشد، نسبت به تگ body جابجا می شود.
ممنون از توجه تون امیدوارم مفید بوده باشه، شادو خندونو سلامت باشید. (:
