برنامه نویسی 17 بازدید

در این مطلب قصد داریم به صورت جامع و با مثال‌های کاربردی به توضیح مفهوم Position Absolute در CSS بپردازیم. گفتنی است که موقعیت‌یابی یک عنصر به طور عمده به موقعیت‌یابی کانتینری که در آن جای گرفته، وابسته است. برای این که بتوانید خود عنصر را موقعیت‌یابی کنید باید بدانید که div والد آن کدام است.

در کد زیر چهار div تو در تو نمایش یافته است. box-1. تا box-3. صرفاً با استفاده از display: flex و margin: auto به صورت مرکزی تنظیم شده‌اند. Box-4. تنظیم margin ندارد و در موقعیت پیش‌فرض خود در گردش سند قرار می‌گیرد.

مشخصه position در مورد همه عناصر به صورت تنظیم نشده است.

default position
موقعیت پیش‌فرض box-4.

برای این که بتوانید موقعیت خود عنصر را تعیین کنید باید دو چیز را بدانید:

  • مختصات موقعیت x و y آن که به وسیله مشخصه‌های top ،right ،bottom و left تنظیم می‌شوند.
  • عنصر خود را در رابطه با کدام والد تنظیم می‌کند.

در زمان به‌کارگیری position: absolute روی box-4.، این عنصر از «گردش نرمال سند» (Normal Document Flow) حذف می‌شود. از آنجا که مختصات آن تعیین نشده است، در موقعیت پیش‌فرض خود می‌ماند که گوشه بالا و چپ div والد است.

 position absolute
موقعیت مطلق box-4. بدون افست

با تعیین top: 0 و left: 0، در ادامه عنصر باید بدانید که نقطه مرجع آن کدام والدش است. برای این که یک والد نقطه مرجع باشد باید به صورت position: relative نسبت به صفحه تنظیم شده باشد. سپس box-4. شروع به پرسش از div والد خود می‌کند که آیا موقعیت‌یابی شده یا نه. در ابتدا از box-3. سؤال می‌کند و در صورتی که پاسخ منفی بگیرد، همین سؤال را از box-2. و سپس از box-1. نیز می‌پرسد چون همه آن‌ها به صورت position: unset هستند. زمانی که نمی‌تواند یک والد موقعیت‌یابی شده پیدا کند، خود را در رابطه با body تنظیم می‌کند. این عنصر همواره در صفحه موقعیت‌یابی شده است.

 position unset
موقعیت مطلق box-4.، موقعیت‌های div های والد تنظیم نشده است.

اگر در مورد box-1. مقدار position: relative را تعیین کنیم، زمانی که box-4. از آن سؤال کند آیا موقعیت‌یابی شده است، پاسخ مثبت دریافت می‌کند. و سپس box-4. در رابطه با box-1. موقعیت‌یابی می‌شود.

 position relative
موقعیت مطلق box-4.، موقعیت نسبی box-1

همین وضعیت در مورد box-2. و box-3. نیز صدق می‌کند.

عنصر موقعیت‌یابی شده به صورت مطلق خود را در رابطه با نزدیک‌ترین جد موقعیت‌یابی شده، موقعیت‌یابی می‌کند. به محض این که عنصر مذکور بتواند یک جد موقعیت‌یابی شده پیدا کند، موقعیت عناصر بالاتر از آن دیگر نسبی نخواهد بود. تصویر زیر، طرح‌بندی به صورت تنظیم position: relative به ترتیب روی box-2. و box-3. را نشان می‌دهد.

positions
موقعیت مطلق box-4. و موقعیت نسبی box-2. و box-3. به ترتیب

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *