موقعیت تعیین شده CSS
- صفحه قبلی موقعیت نسبی CSS
- صفحه بعدی آموزش شناور کردن CSS
حاشیه‌های عناصر قرار داده شده به عنوان موقعیت ثابت به طور کامل از جریان مستند حذف می‌شوند و به نسبت حاشیه‌های خود قرار می‌گیرند، که ممکن است عناصر دیگری در مستند یا حاشیه اولیه باشند. فضایی که عناصر در جریان مستند معمولی اشغال می‌کنند بسته می‌شود، به نظر می‌رسد که عناصر اصلاً وجود ندارند. پس از قرار دادن موقعیت، یک حاشیه مستطیلی ایجاد می‌شود، بدون توجه به اینکه در جریان معمولی چه نوع حاشیه‌ای ایجاد می‌کرد.
موقعیت تعیین شده CSS
موقعیت ثابت باعث می‌شود که موقعیت عناصر با جریان مستند مرتبط نباشد، بنابراین آنها فضایی را اشغال نمی‌کنند. این نکته با موقعیت نسبی متفاوت است، زیرا موقعیت نسبی در واقع به عنوان بخشی از مدل موقعیت جریان معمولی در نظر گرفته می‌شود، زیرا موقعیت عناصر نسبت به موقعیت خود در جریان معمولی تعیین می‌شود.
عناصر دیگر در جریان معمولی مانند عناصر موقعیت ثابت به نظر نمی‌رسند:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
همانطور که در شکل زیر نشان داده شده است:
موقعیت عناصر موقعیت تعیین شده نسبت بهنزدیک‌ترین عنصر والد تعیین شده، اگر عنصر هیچ عنصر والد تعیین شده‌ای نداشته باشد، موقعیت آن نسبت بهاولین بلوک شامل.
برای حل مشکلات موقعیت‌دهی، باید به معنای هر نوع موقعیت‌دهی یادآوری کرد. بنابراین، حالا بیایید مطالبی که یاد گرفته‌ایم را مرور کنیم: موقعیت نسبی “در مقایسه با” موقعیت اولیه عناصر در مستند است، در حالی که موقعیت تعیین شده “در مقایسه با” نزدیک‌ترین عنصر والد تعیین شده است، اگر هیچ عنصر والد تعیین شده‌ای وجود نداشته باشد، “در مقایسه با” اولین بلوک شامل است.
نکته:بر اساس کاربران مختلف، اولین بلوک شامل ممکن است کanvas یا عنصر HTML باشد.
توجه:به دلیل اینکه جعبه‌های موقعیت تعیین شده با جریان مستندات هیچ‌گونه ارتباطی ندارند، بنابراین می‌توانند روی عناصر دیگر صفحه پوشیده شوند. می‌توان از تنظیم ویژگی z-indexبرای کنترل ترتیب قرارگیری این جعبه‌ها.
مثال CSS برای موقعیت تعیین شده
- موقعیت: موقعیت تعیین شده
- این مثال نشان می‌دهد که چگونه می‌توان از مقدارهای تعیین شده برای موقعیت‌دهی به عناصر استفاده کرد.
- صفحه قبلی موقعیت نسبی CSS
- صفحه بعدی آموزش شناور کردن CSS
