مطلق
این مقاله بر موقعیت: مطلق، با این حال می توانید مقالات قبلی من در مورد موقعیت را بخوانید: static; و مقام: نسبی; رسیدن.
موقعیت یک div نسبت به نزدیکترین عنصر حاوی چیزی است که موقعیت مطلق را از موقعیت نسبی متمایز می کند.
موقعیت مطلق را می توان با ویژگی های موقعیت دیگر مانند بالا، پایین، چپ و راست استفاده کرد تا div را به صورت دلخواه جبران کند.
در مقابل مقام: نسبی؛، مقام: مطلق; به طور کامل عنصر را از جریان سند حذف می کند و همه عناصر دیگر به حرکت خود ادامه می دهند، گویی div وجود ندارد.
از آنجایی که حرکت div دیگر بر موقعیت سایر عناصر تأثیر نمی گذارد، اکنون مسئول انباشته شدن و همپوشانی است.
نسبی نسبت به خودش یا، بهتر از آن، نسبت به مکان اصلی خود قرار می گیرد. در مقابل، مطلق نسبت به نزدیکترین عنصر والد قرار می گیرد.
مهم است که به خاطر داشته باشید که دو عنصر وجود دارد که باید با استفاده از موقعیت مطلق در نظر گرفته شود.
.container {
border: 1px solid #000;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 20px;
}
.box2 {
width: 60px;
height: 60px;
background-color: #0003;
}
موارد بالا تنظیمات CSS برای یک سند HTML با دو عنصر فرزند (box1 و box2) و یک div (کانتینر) است که به عنوان div والد آنها عمل می کند.
div والد (کانتینر) دارای ویژگی موقعیت آن نسبی است. این اجازه می دهد تا (جعبه 1) کاملاً در آن قرار گیرد.
مشاهده کد
به چگونگی آن توجه داشته باشید جعبه 1 اکنون 20 پیکسل از قسمت بالای کانتینر فاصله گرفته است.
به یاد بیاورید که گفتم ما از یک موقعیت مطلق نسبت به نزدیکترین عنصر والد استفاده می کنیم.
وقتی Parent div نسبی قرار نگیرد چه اتفاقی می‌افتد؟
البته، از آنجایی که container div نزدیکترین div والد عنصر است، Box1 همچنان 20 پیکسل از آن فاصله خواهد داشت.
وقتی موقعیت: نسبی; ویژگی مربوط به ظرف div توضیح داده می شود، فاصله بین box1 و ظرف کاهش می یابد. این به این دلیل است که box1 اکنون صفحه را به عنوان بخش اصلی خود در نظر می گیرد.
موقعیت Box2 بر اساس جریان عادی سند خواهد بود زیرا ویژگی موقعیت آن تنظیم نشده است. در پشت جعبه 1 قرار می گیرد و باعث انباشته شدن یا همپوشانی می شود.
به منظور مدیریت همپوشانی، می توان از ویژگی CSS استفاده کرد z-index.
