https://virgool.ir/feed/@mehdizfa2026-11-12 06:22:16https://files.virgool.ir/upload/users/38142/avatar/oes42F.pnghttps://virgool.ir/@mehdizhttps://virgool.ir/@mehdiz/نگاهی-دقیق-تر-به-absolute-positioning-در-css-zpz0je517oysسلام دوستان این اولین مطلب من در ویرگول هست.امیدوارم براتون مفید واقع بشه. به نظر من درک عمیق CSS واقعا کار آسونی نیست.مفاهیم اولیش آسون و سر راسته.اما وقتی به مرحله ی استایل دهی پروژه میرسیم تازه با رفتارهای عجیب و جالبش روبرو میشیم. تو این مقاله قراره راجب به رفتار المان های html وقتی که پوزیشن absolute میگرن صحبت بشه. خیلی وقتا دیدیم که چطور وقتی به یه المان پوزشن absolute میدیم موقعیتش به صورت غیر قابل پیش بینی عوض میشه. میخوام این موقعیت های مختلف رو با هم بررسی و تحلیل کنیم که درکمون عمیق تر بشه و بدون مراجعه مداوم به مرورگر زمان کدنویسی بفهمیم الان قراره چه بلایی سر المان میاد.پس بریم سر اصل مطلب با چند مثال کاربردی.حالت اول:وقتی یک المان که به صورت Block-level هست پوزیشن absolute بگیره.در این حالت المانی که پوزیشن گرفته رفتارش شبیه به حالت پیشفرض(position:static) میشه یعنی از جاش تکون نمیخوره اما از جریان عادی سند html خارج میشه. یعنی چی؟یعنی المان ما شبیه روح میشه و دیگه توسط بقیه المان های سند در نظر گرفته نمیشه و از داخلش رد میشن و جاشو پر می کنن. در این جا ما سه تا باکس دارم که هر سه تا div هستن پس به صورت عادی هرکدوم یک لاین رو اشغال میکنن.خوب به باکس دوم پوزیشن absolute میدیم و خروجی رو مشاهده میکنیم.همینطور که میبیند باکس شماره دو از جای قبلیش تکون نخورده اما فضای خودشو به عنصر بعد از خودش داده و خودش دیگه فضایی اشغال نمیکنه. در اینجا میگیم المان از جریان نرمال سند خارج شده. این واسه حالتی هست که المان هیچکدوم از پراپرتی های top, bottom, left, right رو نگرفته باشه .مقدایری top, bottom, left, right موقعیت المان رو نسبت به اولین والد پوزیشن دارش(یعنی والدی که یکی از خصوصیات relative, absolute, fixed, sticky رو دارا باشه ) تعیین میکنه. واگر المان هیچ والدی که پوزیشن گرفته باشه رو پیدا نکنه خودشو با لبه های document body تطبیق میده. در اینجا با اعمال topو left ،المان 100px از بالا و چپ صفحه فاصله میگیره.حالت دوم:کمو بیش شبیه به حالت قبل میمونه. بیاید به باکس هامون خاصیت display: inline-block بدیم و فعلا پوزیشن رو حذف کنیم.همینطور که میبینید باکس ها کنار هم قرار گرفتن و دیکه کل لاین رو اشغال نمیکینن.حالا به باکس دوم پوزیشن absolute میدیم.همینطور که میبینید باکس شماره دو در حالیکه سر جای قبلیش باقی مونده از جریان(فلوی) عادی سند خارج شد و المان بعدیش جاشو پر کرد.حالت سوم:وقتیه که ما با خصوصیت float المان هارو کنار هم قرار دادیم.حالا به باکس دوم پوزیشن absolute میدیم.چه اتفاقی افتاد؟؟ در حالتی که المان خصوصیت float گرفته علاوه بر خارج شدن از جریان عادی سند، میره و به عنوان اولین المان float گرفته قرار میگیره و دیگه تو جای قبل خودش ثابت نمیمونه.حالت چهارم:زمانی که باکس ها flex-item باشند شبیه حالت قبل رفتار میکنن.امیدوارم این مقاله مفید بوده باشه واستون و سعی میکنم توی مقالات بعدی پوزیشن های دیگه هم بررسی کنم.mehdimehdiThu, 05 Mar 2020 21:58:07 +0330