: بیایید درباره یکی دیگه از جنبه‌های فوق‌العاده مهم
در CSS صحبت کنیم که همون حالت‌های position هستن
و این موضوع
یکی از پیچیده‌ترین درس‌های این بخش محسوب میشه
پس مطمئن بشید که خیلی خوب دقت می‌کنید
خب توی CSS چند حالت مختلف برای position وجود داره
اما مهم‌ترین‌هاش و چیزایی که فعلاً قراره
در موردشون صحبت کنیم «normal flow» و «absolute positioning» هستن
پس اول با normal flow شروع کنیم
که در واقع حالت پیش‌فرض position
برای المنت‌ها توی صفحه‌مونه
یا اینکه می‌تونیم normal flow رو هم ایجاد کنیم
با تنظیم position روی مقدار relative
پس توی این حالت می‌گیم المنت در flow هست
که یعنی المنت‌ها دقیقاً طبق ترتیب کدها
توی HTML چیده می‌شن
پس این خیلی ساده‌ست
این همون رفتاریه که تا اینجا
مدام داشتیم می‌دیدیم
فقط یادتون باشه که این اسمش normal flow هست
از طرف دیگه absolute positioning رو داریم
که در واقع به ما این امکان رو میده المنت‌ها رو
کاملاً هر جایی توی صفحه قرار بدیم
حالا چطور می‌تونیم این حالت position رو به دست بیاریم؟
می‌تونیم المنتی رو به صورت absolute position کنیم
با تنظیم property مربوط به position روی absolute
و توی این حالت اون المنت از normal flow
حذف میشه و می‌گیم خارج از flow قرار گرفته
خب حالا چه اتفاقی برای این المنت میفته؟
این المنت کاملاً تأثیرش رو روی المنت‌های اطراف
از دست میده
و حتی ممکنه روی اون‌ها overlap بشه
این یه اتفاق معمولیه که
توی المنت‌هایی که absolute position دارن رخ میده
حالا برای اینکه بتونیم اون المنتی رو که
absolute position شده واقعاً جابجا کنیم
می‌تونیم از propertyهای top, bottom, left یا right استفاده کنیم
تا اون المنت رو دقیقاً جایگذاری کنیم
و این جایگذاری در ارتباط با
یک container که relative position داره اتفاق میفته
می‌دونم که الان کمی گیج‌کننده به نظر میاد
پس بذارید این رو توی عمل ببینیم
کاری که توی این درس انجام می‌دیم
اینه که یه دکمه like درست کنیم که
بیرون از container وسط‌چین ما باشه
خب بذارید توی دمو نشونتون بدم
اینجا در انتها یه دکمه like داریم
و وقتی صفحه رو بزرگ‌تر می‌کنیم مثلاً
می‌بینید که این المنت
همیشه دقیقاً توی همون جایگاه باقی می‌مونه درسته؟
پس هیچ تأثیری از المنت‌های اطراف نمی‌گیره
و این حتی واضح‌تر میشه
وقتی که صفحه رو کوچک‌تر کنیم
اینجا حتی یه موقعیتی داریم
که المنت در واقع overlap می‌کنه
روی المنت مربوط به «related posts» اینجا درسته؟
و می‌بینید که این المنت نه روی چیزی تأثیر میذاره
و نه تحت تأثیر چیزی قرار می‌گیره
از المنت‌های اطرافش
همیشه دقیقاً همونجا سر جاش باقی می‌مونه
فرقی نمی‌کنه توی بقیه صفحه چی اتفاقی بیفته
و این یه مثال عالیه
از یه المنت با absolute position
حالا باید مارک‌آپ این دکمه رو کجا بذاریم؟
یعنی همون HTML
خب فعلاً خیلی مهم نیست که کجا باشه
پس بیایید فعلاً آخر body قرارش بدیم
پس بعد از هر المنت دیگه‌ای
حتی بعد از container هم باشه
ولی فعلاً این قسمت مهم‌ترین بخش نیست
بعداً یه کم تغییرش می‌دیم
پس از همون المنت button استفاده می‌کنیم
که توی چالش‌های کدنویسی‌مون هم به کار بردیم
و اینجا فقط می‌نویسم like
و یه ایموجی خوشگل هم اضافه می‌کنیم
که توی مک می‌تونید این کار رو انجام بدید
با زدن همزمان کلیدهای control + command + space
و توی ویندوز می‌تونید emoji picker رو باز کنید
با زدن کلید Windows + نقطه
این هیچ ربطی به افزونه‌های VS Code نداره
این صرفاً یه قابلیته
که خود سیستم‌عامل ارائه میده
پس دوباره روی مک میشه control + command + space
و روی ویندوز 10 کلید Windows + نقطه
پس فقط اینجا کلمه heart رو سرچ کنیم
و خب VS Code اینو به دلایلی
به یه نماد خاکستری تبدیل می‌کنه
ولی مهم نیست
خب حالا بیاییم اینجا
و دکمه ما باید این اطراف ظاهر بشه
و در حال حاضر دقیقاً اینجاست
پس درست بعد از بقیه المنت‌ها
چون فعلاً هنوز توی normal flow قرار داره
چون هنوز position: absolute براش تعریف نکردیم
پس همچنان داخل flow هست
و درست قرار گرفته
بعد از همه المنت‌های دیگه
ولی حالا بیاییم اینو تغییر بدیم
پس بیاییم با استفاده از button اینو انتخاب کنیم
اول یه سری استایل ظاهری بهش بدیم
یک مقدار padding هم اضافه کنیم
و ما می‌توانیم از این هم استفاده کنیم
یک ترفند برای تعریف ویژگی cursor
همانطور که در چالش هم به شما نشان دادم
و آن را روی pointer تنظیم کنیم
تا اینکه آن دستِ نشانگر ماوس را داشته باشیم درست است؟
و حالا کمی قشنگ‌تر به نظر می‌رسد
و می‌بینید که یک حالت hover هم وجود دارد
که البته می‌توانیم آن را سفارشی کنیم
اما بیایید روی آن وقت نگذاریم
در عوض همین حالا
موقعیت را روی absolute تنظیم می‌کنیم
دقیقاً همانطور که در اسلاید قبلی نشان دادم
پس آن را ذخیره کنیم و ببینیم چه شکلی شده
اما فعلاً تقریباً شبیه قبل است
و دلیلش این است که ما هنوز واقعاً آن را
با استفاده از یکی از چهار ویژگی‌ای که گفتم موقعیت‌دهی نکردیم
یعنی top left right و bottom
پس فعلاً بیایید top را امتحان کنیم
اینجا آن را روی صفر قرار دهیم که همیشه نقطه شروع خوبی است
و بگوییم left هم صفر باشد
ذخیره کنیم و حالا شاید ناپدید شده باشد
بله همینطور است
و دلیلش این است که حالا اینجا قرار گرفته
پس موقعیت top آن را روی صفر گذاشتیم
و حالا دقیقاً بالای صفحه است
چون این پیکسل‌ها یعنی همین صفر پیکسل
فعلاً
از بالای viewport محاسبه می‌شوند
پس اگر این بخش قابل مشاهده صفحه را در نظر بگیریم
اگر مثلاً آن را به bottom تغییر دهیم
پس باید این پایینِ viewport ظاهر شود
پس به طور پیش‌فرض این المان موقعیت‌دهی می‌شود
نسبت به viewport
که باز هم همین بخش قابل مشاهده صفحه است درست؟
پس حالا اینجا می‌ماند
که جای خیلی عجیبی برای آن است
اما نکته مهم اینجاست که در واقع
این المان کاملاً از جریان صفحه خارج شده
و حالا حتی روی این محتوا قرار گرفته است
یعنی انگار که بقیه محتوا اصلاً وجود ندارد
و این موضوع وقتی واضح‌تر می‌شود که ما تغییر بدهیم
مثلاً اندازه پنجره را
و برای بازگشت به حالت قبل آن را دوباره روی top بگذاریم
و البته می‌توانیم آن را به جای دیگری هم منتقل کنیم
پس لازم نیست دقیقاً چسبیده باشد
به بالا و چپ بلکه می‌توانیم مثلاً
آن را ۵۰ پیکسل پایین‌تر و ۵۰ پیکسل بیشتر به راست منتقل کنیم
که از سمت چپ محاسبه می‌شود
خُب این پایه‌های خیلی خیلی ابتدایی
موقعیت‌دهی absolute است
اما نکته بسیار مهم برای درک این است که
این ۵۰ پیکسل باید نسبت به چیزی باشد
و همانطور که یک دقیقه قبل اشاره کردم
به طور پیش‌فرض این ۵۰ پیکسل
نسبت به viewport محاسبه می‌شوند
یعنی همان بخش قابل مشاهده صفحه در مرورگر
و این دلیلش است که وقتی bottom را صفر گذاشتم
المان به این گوشه پایین منتقل شد
با این حال این معمولاً چیزی نیست که ما بخواهیم
پس معمولاً ما می‌خواهیم المان را absolute کنیم
نسبت به یک المان والد دیگر
و برای انجام این کار باید به طور مشخص
ویژگی position آن المان والد را relative بگذاریم
در این مورد ما می‌خواهیم این المان اینجا
در گوشه پایین سمت راست صفحه قرار بگیرد
یعنی روی صفحه و نه روی viewport
پس بیایید این را امتحان کنیم
بگذارید بگوییم bottom برابر ۵۰ پیکسل
و در واقع اینجا هم بگذاریمش
و فقط آن را کپی کنیم و بعد کامنتش کنم
تا به عنوان مرجع اینجا نگه داشته شود
اما چیزی که ما می‌خواهیم این است:
۵۰ پیکسل از پایین
و ۵۰ پیکسل از راست
پس دوباره این باعث می‌شود در viewport به اینجا منتقل شود
اما ما می‌خواهیم این پایینِ صفحه باشد درست است؟
پس باید روی صفحه ویژگی position را relative بگذاریم
و این یعنی المان body
پس بیایید این کار را انجام دهیم
برویم روی body که همینجاست
و ویژگی position آن را relative تنظیم کنیم
ذخیره کنیم
و حالا وقتی پایین برویم اینجاست
عالی و بیایید صفحه را کمی تغییر اندازه بدهیم
و حالا مهم نیست چه اتفاقی بیفتد
این المان همیشه به درستی قرار گرفته است
در گوشه پایین سمت راست body
عالی امیدوارم که متوجه شده باشید
و البته لازم نیست همیشه body باشد
ما می‌توانیم آن را داخل هر المان والد دیگری هم قرار دهیم
که body نباشد
مثلاً بیایید container را امتحان کنیم
اما برای این کار
المان واقعاً باید داخل container باشد
وگرنه این یک المان والد برای دکمه نیست درست است؟
پس بیایید آن را از اینجا بیرون بیاوریم و جای دیگری بگذاریم
و واقعاً مهم نیست کجا
پس بیایید آن را از اینجا بیرون بیاوریم و جای دیگری قرار دهیم
و واقعاً مهم نیست کجا
چیزی که مهمه اینه که این باید داخل این کانتینر قرار بگیره
هرجایی داخل این کانتینر
یعنی همین المنت div که کلاس container روش هست
و فکر می‌کنم بهترین جایی که از نظر معنایی درست باشه
اینجا توی بخش header هست
پس هدر این مقاله
این قسمت در واقع یه جای رایج محسوب میشه
که میشه انتظار داشت دکمه‌ی لایک اونجا باشه
توی یه بلاگ پست مثل این درسته؟
پس بذاریمش اونجا حتی با اینکه از نظر ظاهری
قرار نیست همون‌جا نمایش داده بشه
چون دوباره این المنت رو به صورت absolute پوزیشن می‌کنیم
پس اگر سیوش کنیم
فعلاً چیزی تغییر نمی‌کنه
هنوز هم همینجاست
ولی حالا بیاییم position relative بدیم
به این کانتینر اینجا
پس position relative
و یه تایپو هم این وسط هست
و حالا باید جای دیگه‌ای ظاهر بشه
ولی فعلاً انگار تو همون جای قبله
اما اگر الان اینو تغییر بدیم می‌بینید که اینجا قرار گرفته
بالا سمت راست کانتینر
برای دیدنش بیاییم کانتینر رو inspect کنیم
و این بخش آبی محتواست
اینجا می‌بینید دکمه‌ی لایک الان ۵۰ پیکسل فاصله داره
از پایین و از سمت راست کانتینر
و دلیلش اینه که کانتینر الان
اولین المنت پدره که positionش روی relative ست شده
خب برای اینکه این موضوع واضح‌تر بشه
بیاییم یه توضیح گرافیکی ازش ببینیم
فرض کنید ما یه المنت زرد داریم
اینجا با کلاس container
و position اون روی relative ست شده
بعد یه المنت دیگه داریم همین یکی اینجا
یعنی این المنت نارنجی
که position اون روی absolute ست شده
و top اون هم تنظیم شده
روی ۱۰۰ پیکسل و left روی ۲۰۰ پیکسل
پس دقیقاً ۱۰۰ پیکسل فاصله خواهد داشت
از بالای المنت کانتینر که positionش relative هست
و ۲۰۰ پیکسل از سمت چپ همون اولین کانتینر
اولین کانتینری که position اون relative باشه
مهمه بدونیم که این همیشه مربوط به
اولین المنت پدر با position relative هست
که المنت absolutely positioned بر اساس اون قرار می‌گیره
خب امیدوارم با این تصویرسازی
موضوع براتون روشن‌تر شده باشه
که absolute positioning در CSS چطور کار می‌کنه
بیاییم یه المنت دیگه رو امتحان کنیم
به عنوان اولین کانتینر با position relative
بیاییم این کار رو روی هدر انجام بدیم
این دکمه اینجاست داخل این هدر
و می‌تونیم همین هدر رو به عنوان المنت پدر در نظر بگیریم
که می‌خوایم این دکمه رو به صورت absolute داخلش قرار بدیم
پس بریم سراغ post header و اینجا بذاریمش
و حالا اینم نتیجه
خب حالا اینجاست
باز هم با استفاده از ابزارهای inspect
می‌تونیم کل این المنت رو بررسی کنیم
و در واقع می‌بینیم که دکمه
الان ۵۰ پیکسل فاصله داره از پایین و راست
نسبت به کانتینر جدیدی که position relative داره
خب پس بیاییم اینو حذف کنیم
کامنتش می‌کنیم و این یکی رو هم همینطور
چون چیزی که واقعاً می‌خوایم همونه که اول کار انجام دادیم
یعنی می‌خواستیم نسبت به body پوزیشن‌دهی بشه
خب امیدوارم این براتون واضح شده باشه
پس به عنوان جمع‌بندی این بخش درباره absolute positioning
عملاً می‌تونید هر المنتی رو که می‌خواید
هرجای صفحه قرار بدید
که البته می‌تونه خیلی هم مفید باشه
اما نکته مهم اینه که
از این قابلیت نباید بی‌رویه استفاده کنید
مثلاً برای ساختن layoutهای پیچیده ازش استفاده نکنید
در عوض absolute positioning رو استفاده می‌کنیم
برای المنت‌های تک مثل این دکمه یا چیزای کوچیک دیگه
مثل همونی که توی ویدیوی بعدی نشونتون میدم
ولی توی دنیای واقعی ازش استفاده نمی‌کنیم مثلاً
برای پوزیشن‌دهی به این منو این بالا
اینجا بالای صفحه
یا برای پوزیشن دادن مثلاً
به عکس نویسنده اینجا هرجای صفحه
برای اون موارد در واقع از تکنیک‌های مخصوص layout استفاده می‌کنیم
برای ساخت layout
پس یادتون باشه همیشه سراغ absolute positioning نریم
برای مثال برای ساختن layout
اما همه‌ی اینا با تمرین جا میفته
پس فعلاً زیاد نگرانش نباشید