تعیین موقعیت عناصر HTML CSS - تعیین موقعیت عناصر بلوک

توسعه دهندگان وب این روزها می توانند با استفاده از تکنیک های مختلف CSS، طرح بندی های پیچیده صفحه وب بسازند. برخی از این تکنیک ها سابقه طولانی دارند (فلوات)، برخی دیگر (فلکس باکس) در سال های اخیر محبوبیت پیدا کرده اند.

در این مقاله، نگاهی دقیق به برخی از چیزهای کمتر شناخته شده در مورد موقعیت یابی CSS خواهیم داشت.

قبل از شروع، اجازه دهید به طور خلاصه اصول انواع مختلف موقعیت یابی را مرور کنیم.

مروری بر روش های موقعیت یابی موجود

ویژگی موقعیت CSS نوع موقعیت یابی یک عنصر را مشخص می کند.

گزینه های موقعیت یابی

static مقدار پیش فرض ویژگی موقعیت یابی است. ما گزارش می دهیم که این عنصر از موقعیت یابی استفاده نمی کند - موقعیت یابی تنها در صورتی اعمال می شود که نوع موقعیت یابی غیر از حالت پیش فرض را مشخص کنید.

برای انجام این کار، ویژگی position را روی یکی از مقادیر زیر تنظیم کنید:

• نسبت فامیلی
• مطلق
• درست شد
• چسبنده

و تنها پس از تنظیم موقعیت، می توانید از ویژگی هایی استفاده کنید که عنصر را جبران می کند:

• درست
• پایین
• مقدار اولیه این ویژگی ها کلمه کلیدی خودکار است.

به خاطر داشته باشید که اگر یک عنصر دارای خاصیت موقعیت آن مطلق یا ثابت باشد، یک عنصر کاملاً موقعیت‌یافته است. همچنین، برای عناصر قرار داده شده، ویژگی z-index شروع به کار می کند که ترتیب انباشتگی را تعیین می کند.

تفاوت بین روش های موقعیت یابی اصلی

اکنون بیایید به سرعت به سه تفاوت اساسی بین انواع موقعیت یابی موجود نگاه کنیم:

• عناصر مستقر مطلق (مطلق) به طور کامل از جریان حذف می شوند، محل آنها توسط نزدیکترین همسایگان گرفته می شود.
• نسبتاً موقعیت (نسبی) و چسبنده (چسبنده) جای خود را در جریان حفظ می کنند و نزدیکترین همسایگان آنها آن را اشغال نمی کنند. با این حال، بالشتک این عناصر فضایی را اشغال نمی کند، بلکه توسط سایر عناصر کاملاً نادیده گرفته می شود و این می تواند منجر به همپوشانی عناصر شود.
• عناصر ثابت (و موقعیت ثابت نوعی موقعیت یابی مطلق است) همیشه نسبت به نمای دید (با نادیده گرفتن موقعیت اجداد) قرار می گیرند، در حالی که عناصر چسبنده با اسکرول نسبت به نزدیکترین جد قرار می گیرند (سرریز: خودکار). و فقط در صورت عدم وجود چنین اجدادی نسبت به منطقه دید قرار می گیرند.

شما می توانید این را با جزئیات بیشتر در دمو مشاهده کنید:

توجه: تعیین موقعیت «عناصر چسبنده» هنوز یک فناوری آزمایشی با پشتیبانی محدود مرورگر است. البته در صورت تمایل می توانید از polyfill برای افزودن این قابلیت به مرورگر استفاده کنید، اما با توجه به شیوع کم این ویژگی، به این مقاله پرداخته نخواهد شد.

موقعیت یابی عناصر با نوع موقعیت مطلق

من مطمئن هستم که اکثر شما می دانید موقعیت یابی مطلق چگونه کار می کند. با این حال، برای مبتدیان، بسیاری از چیزها در آن می تواند گیج شود.

بنابراین، تصمیم گرفتم هنگام توصیف ویژگی های کمتر شناخته شده موقعیت یابی با او شروع کنم.

بنابراین، یک عنصر کاملاً موقعیت‌یافته از نزدیک‌ترین جد موقعیت‌یافته‌اش جدا می‌شود. البته، اگر هر یک از اجداد موقعیتی غیر از ایستا داشته باشند، کار می کند - اگر عنصر فاقد اجدادی باشد، از محدوده خارج می شود.

این با مثال زیر نشان داده می شود:

در این نسخه ی نمایشی، جعبه سبز در ابتدا کاملاً با لایه صفر پایین: 0 و چپ: 0 قرار می گیرد، جد آن (جعبه قرمز) به هیچ وجه قرار نداشت.

با این حال، ما پوشش بیرونی (یک عنصر با کلاس jumbotron) را نسبتاً در موقعیت قرار داده ایم. توجه کنید که چگونه موقعیت بلوک سبز با تغییر نوع موقعیت یابی اجداد آن تغییر می کند.

عناصر کاملاً قرار گرفته ویژگی float را نادیده می گیرند

اگر موقعیت‌یابی مطلق یا ثابت را برای یک عنصر شناور اعمال کنیم، ویژگی float روی none تنظیم می‌شود. از طرف دیگر، اگر موقعیت نسبی را تنظیم کنیم، عنصر شناور باقی می ماند.

به دموی مربوطه نگاهی بیندازید:

در این مثال، ما در حال تعریف دو عنصر مختلف شناور به سمت راست هستیم. توجه داشته باشید که وقتی کادر قرمز کاملاً در موقعیت قرار می‌گیرد، ارزش ویژگی float را نادیده می‌گیرد، در حالی که کادر سبز نسبتاً قرار گرفته مقدار float را حفظ می‌کند.

عناصر درون خطی کاملاً قرار گرفته به عناصر بلوکی تبدیل می شوند

یک عنصر درون خطی با موقعیت مطلق یا ثابت ویژگی های یک عنصر بلوکی را به دست می آورد. تبدیل عناصر درون خطی به عناصر بلوک با جزئیات بیشتری در جدول توضیح داده شده است.

در این مورد، ما دو عنصر متفاوت ایجاد کرده ایم. اولی (بلوک سبز) یک عنصر بلوکی است و دومی (بلوک قرمز) یک عنصر درون خطی است. در ابتدا فقط بلوک سبز قابل مشاهده است.

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

وقتی یک موقعیت مطلق یا ثابت را به یک کادر قرمز اختصاص می‌دهید، بلوک می‌شود و اندازه‌های بلوک مشخص شده در آن اعمال می‌شوند.

عناصر کاملاً در موقعیت قرار گرفته‌اند، فرو ریختن لایه ندارند

به‌طور پیش‌فرض، وقتی دو حاشیه عمودی لمس می‌شوند، در یکی برابر با بزرگترین آنها ادغام می‌شوند. به این حالت فروپاشی حاشیه می گویند.

رفتار عناصر کاملاً مستقر در اینجا شبیه عناصر شناور است - لایه های آنها با همسایگان خود ادغام نمی شوند.

در این دمو، این عنصر دارای یک بالشتک 20 پیکسل است. بالشتک آن با بالشتک عنصر والد، همچنین 20 پیکسل، جمع می شود. همانطور که می بینید، فقط موقعیت مطلق فرو نمی ریزد.

اما چگونه می توانیم از فرو ریختن لنت جلوگیری کنیم؟ ما باید یک جداکننده بین آنها قرار دهیم.

این می تواند بالشتک یا حاشیه باشد و می تواند برای عناصر والدین و فرزند اعمال شود. گزینه دیگر اضافه کردن یک clearfix به عنصر والد است.

تعیین موقعیت عناصر با پیکسل و درصد

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

کمی خجالت آور است، درست است؟ بنابراین ابتدا بیایید ببینیم مشخصات در مورد درصد افست چه می گوید:

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

همانطور که گفته شد، هنگام تنظیم افست به صورت درصد، موقعیت عنصر به عرض و ارتفاع والد آن بستگی دارد.

دمو این تفاوت را نشان می دهد:

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

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

توجه: همانطور که احتمالا می دانید، ویژگی transform (همراه با توابع مختلف ترجمه) به شما امکان می دهد موقعیت یک عنصر را تغییر دهید. اما در این حالت، هنگام استفاده از درصد، محاسبه بر اساس اندازه خود عنصر خواهد بود و نه والد آن.

نتیجه

امیدوارم این مقاله به شما در درک بهتر موقعیت در CSS کمک کرده باشد و مسائل اصلی را روشن کرده باشد.

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

به طور کلی، رفتار طبیعی عناصر و ترتیب نمایش آنها در صفحه - جریان سند را خواهیم دید. اما ما اصلا از این دستور راضی نیستیم، می خواهیم لوگو را در گوشه سمت چپ بالا و دکمه را کمی به سمت راست قرار دهیم. ما به کنترل کامل بر همه عناصر نیاز داریم، ما تصمیم می گیریم کجا و چه چیزی باشد. و برای این کار به ابزاری (مخصوص) نیاز دارید که رفتار معمول عناصر در جریان را تغییر دهد. این ملک چیست؟

که در cssسبک ها به این موقعیت یابی می گویند (موقعیت)، که ممکن است طبیعی باشد (ایستا)، نسبت فامیلی (نسبت فامیلی)و مطلق (مطلق).

موقعیت یابی نسبی در CSS

در موقعیت یابی نسبی، بلوک نسبت به موقعیت اصلی خود جابجا می شود. با این حال، با نوشتن در بلوک:

موقعیت: نسبی;

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

چگونه کار می کند؟

داخل بلوک زرد با کلاس بلوک زردیک بلوک قرمز با یک کلاس وجود دارد نسبی بلوک. در یک جریان عادی، بلوک قرمز با بلوک زرد همپوشانی دارد، زیرا آخرین مورد در کد است.

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

تجویز موقعیت: نسبی، ما روشن می کنیم که چه چیزی را نسبت به موقعیت فعلی آن محاسبه کنیم.

بلوک زرد (
پس زمینه رنگ: #ffe70f;
}

بلوک نسبی (
موقعیت: نسبی;
بالا: 10px;
background-color: #ed5b77;
}

در تصویر، می‌توانیم ببینیم که بلوک قرمز چگونه از موقعیت اصلی خود ۱۰ پیکسل به پایین حرکت کرده است.

اگر از کد حذف شود موقعیت: نسبی، سپس بلوک در جای خود باقی می ماند. و اگر در عوض نسبت فامیلی، نوشتن مطلق، سپس به طور پیش فرض این 10 پیکسل از لبه پنجره مرورگر شمارش می شود و در نتیجه بلوک ما برعکس بالا می رود و خود را به لبه پایین مرورگر می کشد. و این جزو برنامه های ما نبود.

موقعیت یابی مطلق در CSS

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

موقعیت: مطلق;

یک ویژگی وجود دارد. موقعیت یابی مطلقهمچنین بر عناصر درون خطی تأثیر می گذارد. اگر یک عنصر درون خطی داده شود موقعیت: مطلق، سپس مانند یک بلوک رفتار می کند. این مشابه دارایی است - نمایش: مسدود کردن.

این همه چیز نیست، عنصر "مطلق" که در داخل والد "نسبی" قرار دارد، نقطه مرجع مختصات خود را تغییر می دهد و از والد شروع به موقعیت یابی می کند.

مسدود کردن با کلاس بلوک مطلقدرون پدر و مادر باشد بلوک زرد.

بلوک زرد (
موقعیت: نسبی;
بالشتک: 10 پیکسل
پس زمینه رنگ: #ffe70f;
}

از آنجایی که بلوک زرد دارد موقعیت یابی نسبی، سپس بلوک قرمز با موقعیت یابی مطلق، با پیکسل های داده شده نسبت به قرمز جابجا می شود.

بلوک مطلق(
موقعیت: مطلق;
پایین: 10 پیکسل؛
سمت چپ: 10 پیکسل؛
background-color: #ed5b77;
}

موقعیت یابی ثابت

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

z-index

ترتیب همپوشانی بلوک‌های «مطلق» را حل می‌کند. ما نیاز داریم که بلوک قرمز بالای بلوک زرد باشد، سپس مشخص می کنیم z-index: 2 برای قرمز و z-index: 1 برای زرد

بلوک قرمز (
موقعیت: نسبی;
z-index: 2;
پس زمینه رنگ: #ffe70f;
}

بلوک-زرد(
موقعیت: مطلق;
بالا: 20 پیکسل؛
z-index: 1;
background-color: #ed5b77;
}

موقعیت یابی یکی از مفاهیم کلیدی در چیدمان بلوک است. با پرداختن به آن، چیزهای زیادی برای شما روشن خواهد شد و چیدمان از شمنیسم به یک فرآیند معنادار تبدیل می شود. بنابراین، این مقاله بر روی ویژگی های CSS تمرکز می کند. موقعیتو شناور.

1 موقعیت: ایستا

به طور پیش فرض، همه عناصر در صفحه به صورت ایستا قرار می گیرند (موقعیت: استاتیک)، به این معنی که عنصر در محل قرار نمی گیرد و در سند در مکان معمول خود، یعنی به همان ترتیبی که در نشانه گذاری html وجود دارد، ظاهر می شود.

نیازی نیست که این ویژگی را به طور خاص به هیچ عنصری اختصاص دهید، مگر اینکه لازم باشد موقعیت قبلی تنظیم شده را به پیش فرض تغییر دهید.

#content( موقعیت: ثابت؛ )

2. موقعیت: نسبی

موقعیت‌یابی نسبی (موقعیت: نسبی) به شما امکان می‌دهد از ویژگی‌های بالا، پایین، چپ و راست برای قرار دادن یک عنصر نسبت به جایی که در موقعیت‌یابی عادی ظاهر می‌شود استفاده کنید.

بیایید #محتوا را 20 پیکسل به پایین و 40 پیکسل به سمت چپ منتقل کنیم:

#content( موقعیت: نسبی؛ بالا: 20 پیکسل؛ سمت چپ: -40 پیکسل؛ )

توجه داشته باشید که اکنون یک فضای خالی وجود دارد که بلوک #محتوای ما باید در آن باشد. به دنبال بلوک #content، بلوک #footer به پایین حرکت نکرد زیرا #content همچنان جای خود را در سند دارد، حتی اگر آن را منتقل کردیم.

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

3. مقام: مطلق

با موقعیت یابی مطلق (موقعیت: مطلق)، عنصر از سند حذف می شود و در جایی که شما به آن می گویید ظاهر می شود.

برای مثال، بیایید بلوک #div-1a را به گوشه سمت راست بالای صفحه منتقل کنیم:

#div-1a ( موقعیت: مطلق؛ بالا: 0؛ راست: 0؛ عرض: 200 پیکسل؛ )

توجه داشته باشید که این بار، چون بلوک #div-1a از سند حذف شده است، عناصر باقیمانده در صفحه به طور متفاوتی قرار می گیرند: #div-1b، #div-1c، و #footer به موقعیت بلوک حذف شده و خود بلوک #div-1a دقیقاً در گوشه سمت راست و بالای صفحه قرار دارد.

بنابراین، ما می توانیم هر عنصر را نسبت به صفحه قرار دهیم، اما این کافی نیست. در واقع، باید #div-1a را نسبت به بلوک #محتوای والد قرار دهیم. و در این مرحله، موقعیت یابی نسبی دوباره وارد بازی می شود.

4. موقعیت: ثابت

موقعیت یابی ثابت (موقعیت: ثابت)، زیر مجموعه ای از موقعیت یابی مطلق است. تنها تفاوت آن این است که همیشه در قسمت قابل مشاهده صفحه است و در حین پیمایش صفحه حرکت نمی کند. از این نظر کمی شبیه یک تصویر پس زمینه ثابت است.

#div-1a ( موقعیت: ثابت؛ بالا: 0؛ راست: 0؛ عرض: 200 پیکسل؛ )

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

5. مقام:نسبی + مقام:مطلق

با دادن موقعیت نسبی بلوک #content (موقعیت: نسبی)، می توانیم هر عنصر فرزند را نسبت به مرزهای آن قرار دهیم. بیایید یک بلوک #div-1a را در گوشه سمت راست بالای بلوک محتوا قرار دهیم.

#محتوا ( موقعیت: نسبی؛ ) #div-1a ( موقعیت: مطلق؛ بالا: 0؛ راست: 0؛ عرض: 200 پیکسل؛ )

6. دو ستون

با استفاده از دانش مراحل قبلی، می توانید دو ستون را با استفاده از موقعیت یابی نسبی و مطلق ایجاد کنید.

#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0; عرض:200px ;)

یکی از مزایای موقعیت یابی مطلق، امکان قرار دادن عناصر در یک نظم دلخواه، صرف نظر از نحوه قرارگیری آنها در نشانه گذاری است. در مثال بالا، بلوک #div-1b قبل از بلوک #div-1a قرار گرفته است.

و اکنون باید یک سوال داشته باشید: "بقیه عناصر نمونه ما کجا رفتند؟". آنها در زیر بلوک های کاملاً واقع ناپدید شدند. خوشبختانه راهی برای رفع این مشکل وجود دارد.

7. دو ستون ارتفاع ثابت

یک راه حل این است که یک ارتفاع ثابت به ظرف حاوی ستون ها بدهید.

#محتوا ( موقعیت: نسبی؛ ارتفاع: 450 پیکسل؛ ) #div-1a ( موقعیت: مطلق؛ بالا: 0؛ راست: 0؛ عرض: 200 پیکسل؛ ) #div-1b ( موقعیت: مطلق؛ بالا: 0؛ چپ: 0 ؛ عرض: 200 پیکسل؛ )

راه حل چندان مناسب نیست، زیرا ما هرگز از قبل نمی دانیم که متن در چه اندازه ای در ستون ها قرار می گیرد و از چه فونتی استفاده می شود.

8. شناور

برای ستون های ارتفاع متغیر، موقعیت مطلق مناسب نیست، بنابراین بیایید به گزینه دیگری نگاه کنیم.

با اختصاص دادن یک شناور به بلوک، آن را تا جایی که ممکن است به لبه راست (یا چپ) فشار می دهیم و متن زیر بلوک دور آن می پیچد. معمولاً از این تکنیک برای تصاویر استفاده می شود، اما ما از آن برای کارهای پیچیده تری استفاده خواهیم کرد، زیرا تنها ابزاری است که در اختیار داریم.

#div-1a ( شناور: چپ؛ عرض: 200 پیکسل؛ )

9. ستون های شناور

اگر float: left را به بلوک اول و سپس float: چپ به دومی را اختصاص دهیم، هر کدام از بلوک ها به لبه سمت چپ فشار داده می شوند و دو ستون با ارتفاع متغیر به دست می آوریم.

#div-1a ( شناور: چپ؛ عرض: 150 پیکسل؛ ) #div-1b ( شناور: چپ؛ عرض: 150 پیکسل؛ )

همچنین می توانید مقدار شناور مخالف را به ستون ها اختصاص دهید، در این صورت آنها در امتداد لبه های ظرف توزیع می شوند.

#div-1a ( شناور:راست؛ عرض: 150 پیکسل؛ ) #div-1b ( شناور: چپ؛ عرض: 150 پیکسل؛ )

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

10. شناور شفاف

تمیز کردن شناور به دو صورت انجام می شود. اگر بعد از ستون ها بلوک دیگری وجود داشته باشد، کافی است clear: هر دو را به آن اختصاص دهید.

#div-1a ( float:left; عرض:190px; ) #div-1b ( float:left; width:190px; ) #div-1c (clear:both; )

یا ویژگی overflow: hidden را به کانتینر والد اختصاص دهید

#محتوا ( سرریز: پنهان؛ )

در هر صورت نتیجه یکسان خواهد بود.

نتیجه

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

موقعیت یابی بلوک های cssیکی از مهمترین مراحل چیدمان است، زیرا این همان چیزی است که بر سازگاری سایت یا امکان پیاده سازی آن در آینده (اگر در حال حاضر مورد نیاز نباشد) تأثیر می گذارد و همچنین تأثیر قابل توجهی در مقیاس بندی بیشتر دارد. سایت. برای «طراحان چیدمان بدبخت» غیرمعمول نیست که چنان چیدمانی بسازند که در نهایت بیرون انداختن آن راحت تر از تغییر چیزی باشد، اما در عین حال می تواند کاملاً مطابق با چیدمان به نظر برسد. این وضعیت ناشی از عدم درک مکان و زمان استفاده از یک یا نوع دیگری از موقعیت است. امروز سعی خواهیم کرد این موضوع را درک کنیم. و بنابراین، در css یک ویژگی وجود دارد موقعیتاین ویژگی می تواند 5 مقدار داشته باشد، اما ما 4 مقدار اصلی را در نظر خواهیم گرفت:

• مطلق
• ایستا
• نسبت فامیلی
• درست شد

موقعیت یابی بلوک مطلق (مطلق)

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

اغلب این نوع موقعیت یابی زمانی استفاده می شود که بلوک باید به لبه سمت راست یا پایین فشار داده شود. این طرح را در نظر بگیرید.

برای راحتی، بلوک ها با یک قاب چند رنگ برجسته شدند. نشانه گذاری به این صورت خواهد بود:

XHTML

رابطه ( موقعیت: نسبی؛ ) زرد ( موقعیت: مطلق؛ راست: 10 پیکسل؛ پایین: 10 پیکسل؛ )

در این مثال از ویژگی های راست و پایین برای تنظیم تورفتگی از لبه های سمت راست و پایین استفاده کرده ایم. این مقادیر ویژگی معادل بالا هستند: ارتفاع عنصر 10 پیکسل و سمت چپ: عرض عنصر 10 پیکسل است.

موقعیت یابی مطلق نیز گاهی اوقات در مواقعی که لازم است از یک عنصر بر روی عنصر دیگر "پرش" استفاده شود.

موقعیت یابی استاتیک (استاتیک)

رایج ترین نوع موقعیت یابی که در هر صفحه رخ می دهد و معمولاً برای اکثر عناصر تنظیم می شود، static است، در css به صورت static نوشته می شود. برای اکثر تگ های HTML، این مقدار به طور پیش فرض تعیین می شود. اگر موقعیت به صراحت تنظیم نشده باشد، مقدار ثابت خواهد بود. با این چیدمان، عناصر یکی زیر دیگری ردیف می شوند و مختصات در پنجره هر عنصر به نزدیکترین عناصر با موقعیت: ایستا یا موقعیت: نسبی بستگی دارد. ویژگی های بالا، چپ، راست، پایین با این موقعیت یابی کار نمی کنند، موقعیت به دلیل خاصیت حاشیه تغییر می کند.

موقعیت یابی نسبی (نسبی)

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

موقعیت یابی ثابت (ثابت)

موقعیت یابی ثابت با ویژگی های تنظیم مختصات مشابه مطلق است، اما موقعیت نه نسبت به صفحه HTML بلکه نسبت به پنجره مرورگر محاسبه می شود، یعنی. با ویژگی top: 10px، padding بالایی را روی 10px قرار می دهید از پنجره مرورگرو مهم نیست که در چه سطح پیمایش صفحه هستید، این عنصر همیشه صفحه شما را دنبال می کند.

معمولاً برای عناصر ناوبری استفاده می شود تا کاربر همیشه اطلاعات مهم یا پیوندهایی به صفحات جالب را در دید داشته باشد.

هنوز درک نمی کنید که موقعیت یابی مطلق در CSS چگونه کار می کند و عناصر را در صفحه از دست می دهید؟ بیایید این جادو را کشف کنیم.

مقدمه ای بر موقعیت یابی

وقتی موقعیت: مطلق را تنظیم می کنید، این خود عنصر نیست که جلوه می کند، بلکه محفظه والد آن است، زیرا CSS نسبت به آن قرار دارد. بخش مشکل این است که همیشه والد فوری عنصر نیست.

کدی را در نظر بگیرید که چهار دیو مانند یک عروسک در یکدیگر قرار گرفته اند.

Box-1، box-2 و box-3 برای زیبایی با ویژگی‌های CSS خودکار و انعطاف‌پذیر متمرکز شده‌اند. بلوک box-4 در موقعیت پیش فرض خود در جریان سند باقی می ماند.

بدنه (نمایشگر: flex; ) .box-1, .box-2, .box-3 (نمایش: flex; حاشیه: auto; )

هر 4 عنصر دارای موقعیت پیش فرض هستند. در حال حاضر، طرح به این شکل است:

در رابطه با چه جایگاهی داریم؟

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

• کدام والد نقطه شروع خواهد بود.
• مقدار افست نسبت به نقطه مرجع (بالا، پایین، راست یا چپ).

اگر موقعیت: مطلق را در کادر-4 تعریف کنید، آن عنصر از جریان عادی سند خارج می شود. اما اکنون در جای خود باقی مانده است، زیرا مختصات افست تنظیم نشده است. اگر عرض یک عنصر در CSS تعریف نشده باشد، با عرض محتوای آن (به علاوه padding و حاشیه) برابر خواهد بود.

حالا بیایید ویژگی های top: 0 و left: 0 را اضافه کنیم. عنصر باید تعیین کند که کدام کانتینر والد مبدأ این مختصات خواهد بود. به نزدیکترین عنصر با موقعیت غیر ایستا تبدیل می شود (اغلب موقعیت: نسبی). box-4 شروع به نظرسنجی از اجداد خود یکی یکی می کند. نه باکس-3، نه باکس-2 و نه باکس-1 مناسب نیستند، زیرا به طور پیش فرض موقعیت یابی در CSS دارند (تنظیم نشده).

اگر اجدادی یافت نشد، عنصر نسبت به بدنه سند قرار می گیرد:

اگر موقعیت: نسبی را روی عنصر جعبه-1 تنظیم کنید، نقطه مرجع خواهد بود:

یک عنصر کاملاً در موقعیت نسبت به نزدیکترین جد قرار گرفته خود قرار می گیرد.

هنگامی که یک نقطه مرجع پیدا شد، همه چیز بالای آن در درخت DOM دیگر اهمیتی ندارد.

اگر موقعیت: را نسبت به جعبه-2 نیز تنظیم کنید، جعبه-4 نسبت به آن قرار می گیرد، زیرا این جد نزدیکتر است.

به طور مشابه برای ظرف جعبه-3: