سلام،

1. در مورد وسط قرار دادن عنصر:

وقتی می‌خوایم یه عنصر رو وسط صفحه یا وسط یه عنصر دیگه قرار بدیم، معمولاً از top و left استفاده می‌کنیم. دلیلش اینه که وقتی یه عنصر رو با استفاده از position: absolute یا position: relative قرار میدیم، top و left فاصله عنصر رو از بالا و چپ تعیین می‌کنن. حالا اگه بخوایم یه عنصر رو دقیقاً وسط قرار بدیم، معمولاً فاصله‌اش از بالا (top) و چپ (left) رو ۵۰ درصد تنظیم می‌کنیم.

مثلاً فرض کن یه عنصر ۱۰۰ پیکسل عرض و ۱۰۰ پیکسل ارتفاع داره. اگه top: 50% و left: 50% رو تنظیم کنی، گوشه بالای چپ عنصر میره توی نقطه وسط. حالا برای اینکه عنصر دقیقاً وسط صفحه قرار بگیره، با دستور transform: translate(-50%, -50%) عنصر رو از همون نقطه وسط، به موقعیت درستش جابجا می‌کنیم.

اگر بخوایم از bottom و right برای وسط‌چین کردن استفاده کنیم، از دستور transform: translate(50%, 50%) استفاده می‌کنیم. همچنین، برای left و bottom از transform: translate(-50%, 50%) و برای top و right از transform: translate(50%, -50%) استفاده می‌شه. اینجوری اول گوشه عنصر رو وسط‌چین می‌کنی و بعد با استفاده از transform کل عنصر رو به موقعیت دقیقش منتقل می‌کنی.

اما در مورد اینکه چرا نمیشه همزمان از right و left استفاده کرد، وقتی می‌خوایم از left: 50% استفاده کنیم، یعنی می‌گیم که لبه چپ عنصر باید 50 درصد از سمت چپ فاصله بگیره. به همین ترتیب، right: 50% یعنی لبه راست عنصر باید 50 درصد از سمت راست فاصله بگیره. اما اگه بخوای هر دو رو همزمان اعمال کنی، مرورگر دچار سردرگمی می‌شه چون نمی‌دونه کدوم رو باید اولویت بده. به همین دلیل، نمی‌تونی از left و right به صورت همزمان برای مرکز چین کردن استفاده کنی. برای همین معمولاً از یک سمت (مثل left) و سپس از transform: translateX(-50%) استفاده می‌کنیم تا عنصر دقیقاً در مرکز قرار بگیره. البته این دستور فقط عنصر رو در محور X (افقی) وسط‌چین می‌کنه. چون در مورد موقعیت عنصر در محور Y (عمودی) چیزی نگفتیم، عنصر به صورت کامل در وسط صفحه قرار نمی‌گیره و فقط به لحاظ افقی وسط‌چین می‌شه.

2. در مورد تأثیر position:

خاصیت position توی CSS یکی از مهم‌ترین خاصیت‌هاست که مشخص می‌کنه یه عنصر توی صفحه چطور قرار بگیره. بیاید به انواع position نگاهی بندازیم:

static: حالت پیش‌فرض همه عناصره. یعنی عنصر توی همون جای طبیعی خودش توی سند قرار می‌گیره و دستورات top، left، right، bottom روش تاثیری ندارن.

relative: فرض کن یه صفحه وب داری که توش یه باکس یا بلوک متنی قرار دادی. به‌طور پیش‌فرض، این باکس توی جایگاه طبیعی خودش قرار می‌گیره. حالا اگه position: relative بهش بدی و بگی top: 10px، این باکس ۱۰ پیکسل از جای طبیعی خودش پایین‌تر میاد. اما یه نکته مهم اینجا هست: با اینکه باکس جابجا شده، فضای اصلی خودش رو توی صفحه نگه می‌داره؛ یعنی انگار هنوز توی همون جای قبلیش هست، ولی به‌صورت بصری جابجا شده.

مثال:

فرض کن یه باکس قرمز رنگ داری که به‌طور پیش‌فرض وسط صفحه قرار گرفته. وقتی می‌گی top: 10px و position: relative، این باکس ۱۰ پیکسل پایین‌تر میاد، ولی بقیه عناصر صفحه هنوز فکر می‌کنن که این باکس توی جای اصلیش قرار داره.

absolute: حالا فرض کن یه باکس دیگه داری و می‌خوای این باکس دقیقاً نسبت به یه عنصر والد (که مثلاً position: relative داره) جابجا بشه. اگه به این باکس بگی position: absolute و بعدش بگی left: 50px، این باکس از جایگاه اصلی خودش توی صفحه جدا میشه و به‌جای اینکه نسبت به مکان طبیعی خودش جابجا بشه، نسبت به نزدیک‌ترین والد با position غیر static تنظیم میشه.

مثال:

فرض کن یه باکس آبی رنگ داری که داخل یه باکس سبز رنگ قرار گرفته. وقتی می‌گی position: absolute و left: 50px، این باکس آبی از سمت چپ باکس سبز، ۵۰ پیکسل فاصله می‌گیره.

fixed: خیلی شبیه absolute هست، با این تفاوت که نسبت به پنجره مرورگر جابجا میشه. یعنی اگه اسکرول کنی، جای این عنصر توی صفحه ثابت می‌مونه.

sticky: ترکیبی از relative و fixed هست. یعنی اولش مثل relative رفتار می‌کنه و وقتی به یه نقطه‌ای از صفحه رسید، مثل fixed به صفحه چسبیده می‌مونه.

بنابراین، position می‌تونه تاثیر خیلی زیادی روی چیدمان عناصر توی صفحه داشته باشه و می‌تونه مشخص کنه که یه عنصر نسبت به والدینش یا نسبت به کل صفحه چطور قرار بگیره و جابجا بشه.