محل قرارگیری عناصر - خواص مربوط به Position

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

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

مرورگر عناصر HTML را طبق جریان عادی صفحه نمایش می دهد. عناصر بلوکی معمولا زیر یکدیگر قرار می گیرند و عناصر درون خطی در امتداد متن دیده می شوند. مقدار پیش فرض position برای بیشتر عناصر، static است؛ بنابراین عنصر در جای طبیعی خود باقی می ماند و ویژگی های top، right، bottom و left روی آن اثر نمی گذارند.

برای نمونه، اگر یک پاراگراف را با position: static نگه دارید، بعد از پاراگراف قبلی و پیش از عنصر بعدی نمایش داده می شود. این رفتار برای بیشتر بخش های یک صفحه کافی است و نیازی نیست برای همه عناصر مقدار position تعریف کنید. استفاده بی دلیل از موقعیت دهی می تواند خوانایی کد و نگهداری چیدمان را دشوار کند.

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

عنصری با position: relative ابتدا جای خود را در جریان عادی صفحه حفظ می کند. سپس می توانید آن را با top، right، bottom یا left کمی از موقعیت اولیه جابه جا کنید. فضای اولیه عنصر همچنان در چیدمان باقی می ماند؛ به همین دلیل، جابه جایی آن معمولا باعث حرکت عناصر اطراف نمی شود.

مقدار absolute رفتار متفاوتی دارد. عنصر از جریان عادی صفحه خارج می شود و برای تعیین موقعیت، به نزدیک ترین والد دارای position غیر از static وابسته است. اگر چنین والدی وجود نداشته باشد، موقعیت آن معمولا نسبت به بخش اولیه صفحه یا viewport محاسبه می شود.

مثال کاربردی: برای قرار دادن یک آیکون روی گوشه تصویر، به تصویر یا قاب آن position: relative بدهید و آیکون را با position: absolute در گوشه دلخواه تنظیم کنید. این روش باعث می شود آیکون به همان قاب وابسته بماند، نه اینکه با تغییر محتوای صفحه به جای نامربوطی منتقل شود.

.image-box {
  position: relative;
}

.image-label {
  position: absolute;
  top: 12px;
  right: 12px;
}

یکی از خطاهای رایج این است که برای عنصر absolute مقدارهای top و left تعریف می شود، اما برای والد آن موقعیت مناسبی در نظر گرفته نمی شود. در این حالت، عنصر ممکن است نسبت به یک والد دورتر یا به جای دیگری از صفحه تراز شود. در بیشتر چیدمان های متداول، تنظیم والد روی relative راه حل روشنی است.

والد لازم نیست حتما جابه جا شود. position: relative می تواند تنها برای ساختن مرجع موقعیت دهی به کار برود و ظاهر خود والد را تغییر ندهد. فرزند absolute نیز از جریان عادی خارج می شود، پس بهتر است مطمئن شوید فضای لازم برای آن در طراحی پیش بینی شده است.

مثال کاربردی: در کارت محصول، قاب کارت را relative کنید و برچسب «جدید» را absolute قرار دهید. به این ترتیب با تغییر جای کارت در صفحه، برچسب هم همراه آن حرکت می کند و روی کارت دیگری قرار نمی گیرد.

position: fixed عنصر را نسبت به viewport موقعیت دهی می کند؛ بنابراین با پیمایش صفحه، در همان جای صفحه نمایش باقی می ماند. این ویژگی برای دکمه بازگشت به بالا یا نوارهای ثابت می تواند مفید باشد. در عین حال، اگر عنصر fixed روی متن یا کنترل های دیگر بیفتد، بخشی از محتوا را می پوشاند؛ پس در طراحی موبایل و صفحه های کوچک نیز آن را بررسی کنید.

position: sticky ترکیبی از رفتار عادی و ثابت دارد. عنصر ابتدا در جای معمول خود قرار می گیرد و هنگام پیمایش، در محدوده والد به موقعیت تعیین شده می چسبد. برای فعال شدن این رفتار معمولا باید دست کم یکی از مقادیر top، right، bottom یا left مشخص شود.

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

وقتی دو عنصر در یک محدوده روی هم قرار می گیرند، z-index می تواند ترتیب لایه های آن ها را کنترل کند. در حالت معمول، مقدار بزرگ تر در همان زمینه موقعیت دهی بالاتر نمایش داده می شود؛ اما مقایسه z-index همیشه فقط به عدد وابسته نیست و ساختار لایه بندی والدها نیز اهمیت دارد.

z-index برای هر عنصر، بدون توجه به زمینه موقعیت دهی آن، به یک شکل عمل نمی کند. در چیدمان های رایج، این ویژگی را کنار position های relative، absolute، fixed یا sticky به کار ببرید. اگر عدد بسیار بزرگی نتیجه مورد انتظار را ایجاد نکرد، ابتدا والدها و زمینه های لایه بندی را بررسی کنید.

مثال کاربردی: اگر یک منوی بازشونده پشت تصویر قرار می گیرد، افزایش z-index ممکن است کافی نباشد؛ ممکن است والد منو در لایه پایین تری قرار داشته باشد. در چنین شرایطی ساختار والدها را بررسی و ترتیب لایه ها را در همان سطح اصلاح کنید.

.menu {
  position: relative;
  z-index: 2;
}

.menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 3;
}

بعد از انتخاب position مناسب، می توانید با ویژگی های top، right، bottom و left فاصله یا محل قرارگیری عنصر را تعیین کنید. این ویژگی ها مقدارهایی مانند پیکسل، درصد یا واحدهای نسبی می پذیرند. برای نمونه، top فاصله را از لبه بالایی مرجع موقعیت دهی مشخص می کند و right به لبه سمت راست اشاره دارد.

اثر این مقادیر به نوع position بستگی دارد. اگر عنصر static باشد، top و دیگر جهت ها جابه جایی ایجاد نمی کنند. برای relative، جابه جایی از موقعیت عادی عنصر سنجیده می شود؛ برای absolute و fixed، مقادیر نسبت به مرجع مربوط به همان عنصر محاسبه می شوند.

در طراحی راست به چپ، مفهوم right و left همچنان به لبه های فیزیکی اشاره دارد. اگر چیدمان باید با جهت متن سازگار شود، می توانید در موارد مناسب از ویژگی های منطقی CSS مانند inset-inline-start و inset-block-start نیز استفاده کنید. این ویژگی ها در پروژه هایی که چند جهت نوشتاری دارند، نگهداری کد را آسان تر می کنند.

در بعضی طراحی ها لازم است یک عنصر روی عنصر دیگر دیده شود؛ برای مثال، متن روی تصویر قرار بگیرد یا پنجره بازشونده روی محتوای صفحه نمایش داده شود. موقعیت دهی امکان هم پوشانی را فراهم می کند و z-index ترتیب نمایش لایه ها را، در چارچوب زمینه لایه بندی مربوط، تنظیم می کند.

اگر تصویری به عنوان پس زمینه محتوای یک بخش استفاده می شود، بهتر است ساختار HTML و CSS را طوری طراحی کنید که متن همچنان خوانا و قابل دسترس باشد. استفاده از z-index منفی بدون بررسی والدها می تواند عنصر را پشت زمینه والد پنهان کند. به همین دلیل، مقداردهی z-index را مرحله به مرحله و متناسب با ساختار صفحه انجام دهید.

در نمونه زیر، تصویر با موقعیت absolute در گوشه بالایی قرار می گیرد و z-index آن تعیین می کند نسبت به عناصر هم سطح چگونه دیده شود. در استفاده واقعی، والد تصویر نیز باید مرجع مناسبی برای موقعیت دهی باشد.

.visual {
  position: relative;
}

.visual img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.visual-content {
  position: relative;
  z-index: 2;
}

اگر فرزند absolute نسبت به بخش اشتباهی از صفحه تنظیم شده است، والدهای آن را بررسی کنید. معمولا مشخص کردن position: relative برای والد موردنظر باعث می شود مختصات فرزند قابل پیش بینی تر شود.

عنصر ثابت ممکن است روی متن، دکمه یا بخش مهمی از صفحه قرار بگیرد. اندازه صفحه را تغییر دهید و رفتار آن را در موبایل هم آزمایش کنید؛ در صورت نیاز برای عنصر فضای مناسب در نظر بگیرید یا شیوه نمایش آن را در اندازه های کوچک تغییر دهید.

قرار دادن عددهای بسیار بزرگ برای z-index همیشه مشکل لایه بندی را حل نمی کند. ابتدا بررسی کنید عنصر در کدام زمینه لایه بندی قرار دارد و آیا والد آن مانع نمایش در سطح بالاتر شده است. یک مقیاس منظم برای لایه های اصلی پروژه، اصلاحات بعدی را ساده تر می کند.