خصوصیت position در CSS به ما این امکان را میدهد که نحوه قرارگیری یک المان را در صفحه وب کنترل کنیم. این خصوصیت به همراه خصوصیات top, bottom, left, right و z-index، ابزارهای قدرتمندی برای جابجایی و سازماندهی دقیق عناصر فراهم میکنند.
۱. مقادیر اصلی position:
-
static(ایستا): -
توضیح: این مقدار، حالت پیشفرض برای تمام عناصر HTML است. المانها به ترتیب عادی که در کد HTML ظاهر میشوند، در صفحه قرار میگیرند.
-
تأثیر
top,bottom,left,right: این خصوصیات هیچ تأثیری بر روی المانهای باposition: staticندارند. -
تأثیر
z-index: این خصوصیت نیز بر روی المانهای ایستا تأثیری ندارد. -
relative(نسبی): -
توضیح: المان با
position: relativeنسبت به موقعیت عادی خود در جریان صفحه جابجا میشود. یعنی ابتدا در جای خود قرار میگیرد و سپس با استفاده ازtop,bottom,left,rightکمی جابجا میشود. -
تأثیر
top,bottom,left,right: این خصوصیات، میزان جابجایی المان را از موقعیت عادیاش تعیین میکنند. برای مثال،top: 10px;المان را ۱۰ پیکسل به سمت بالا میکشد. -
حفظ فضا: نکته مهم این است که فضایی که المان در حالت عادی اشغال میکرد، همچنان رزرو میشود. این بدان معناست که جابجایی المان باعث عقب رفتن یا جابجایی سایر عناصر نمیشود و ممکن است باعث همپوشانی شود.
-
کاربرد: مناسب برای ایجاد جابجاییهای جزئی یا به عنوان والد برای المانهای با
position: absolute. -
absolute(مطلق): -
توضیح: المان با
position: absoluteاز جریان عادی صفحه خارج میشود و موقعیت آن نسبت به نزدیکترین والدِ موقعیتداده شده (کهpositionآنrelative,absolute,fixed, یاstickyباشد) تعیین میگردد. اگر چنین والدی وجود نداشته باشد، موقعیت آن نسبت به اولین عنصر<body>تعیین میشود. -
تأثیر
top,bottom,left,right: این خصوصیات، موقعیت دقیق المان را نسبت به گوشههای والدِ موقعیتداده شده مشخص میکنند. برای مثال،top: 0; left: 0;المان را به گوشه بالا-چپ والد منتقل میکند. -
خارج از جریان: از آنجایی که المان از جریان عادی خارج میشود، فضایی که قبلاً اشغال میکرد، توسط عناصر دیگر پر میشود.
-
کاربرد: ایجاد لایههای روی هم، قرار دادن عناصر در گوشهها، ساخت پاپآپها یا تولتیپها.
-
fixed(ثابت): -
توضیح: المان با
position: fixedنسبت به پنجره نمایش مرورگر (viewport) موقعیتدهی میشود و در جای خود ثابت میماند، حتی اگر کاربر صفحه را اسکرول کند. -
تأثیر
top,bottom,left,right: این خصوصیات، موقعیت المان را نسبت به لبههای پنجره مرورگر تعیین میکنند. -
خارج از جریان: مشابه
absolute، این المان نیز از جریان عادی صفحه خارج میشود. -
کاربرد: ساخت هدرها، فوترها، نوار کناری ثابت (Sidebar)، یا دکمههای “بازگشت به بالا” که همیشه قابل مشاهده باشند.
-
sticky(چسبنده): -
توضیح: این مقدار ترکیبی از
relativeوfixedاست. ابتدا المان مانندposition: relativeرفتار میکند و در جریان عادی صفحه قرار میگیرد. اما هنگامی که کاربر صفحه را اسکرول میکند و المان به یک نقطه مشخص (که توسطtop,bottom,left,rightتعیین میشود) میرسد، رفتار آن بهposition: fixedتغییر میکند و در آن نقطه ثابت میماند. -
تأثیر
top,bottom,left,right: این خصوصیات هم موقعیت نسبی اولیه و هم نقطه “چسبندگی” را تعیین میکنند. -
کاربرد: مفید برای سربرگهای بخشها (Section Headers) که هنگام اسکرول در بالای صفحه ثابت میمانند، یا منوهای ناوبری که پس از عبور از یک نقطه خاص، در بالای صفحه دیده میشوند.
۲. خصوصیت z-index:
- توضیح: این خصوصیت فقط برای المانهایی که
positionآنها غیر ازstaticاست (یعنیrelative,absolute,fixed,sticky) کاربرد دارد.z-indexمیزان “ارتفاع” یا “لایهبندی” یک المان را در محور Z (محور عمود بر صفحه) تعیین میکند. - مقادیر: اعداد صحیح مثبت یا منفی. هرچه عدد بزرگتر باشد، المان بالاتر (روی لایههای دیگر) قرار میگیرد.
- کاربرد: کنترل اینکه کدام المان روی کدام المان دیگر نمایش داده شود، مخصوصاً زمانی که المانها با هم همپوشانی دارند.
پیادهسازی صحیح موقعیتدهی به طراحان اجازه میدهد تا عناصر را دقیقاً در جایی که میخواهند قرار دهند و طرحبندیهای پیچیده و بصری جذابی ایجاد کنند.
کلیدواژه ها : Position CSS-موقعیتدهی CSS-relative-absolute-fixed-sticky-static-z-index-top-bottom-left-right-Layout-
