تعیین محل عناصر HTML با شیوه‌های مختلفی امکان‌پذیر است.

مهم‌ترین ویژگی شیوه‌نامه‌های CSS برای مکان‌یابی عنصرها در HTML، ویژگی Position است.

این ویژگی مقدارهای Static، Relative، Absolute و Fixed را می‌پذیرد که در ادامه هر یک را به اختصار مرور خواهیم کرد.

Static

این مقدار مقدار پیش‌فرض است و محل عنصرها را بر اساس محل قرارگیری آن‌ها در محتوای HTML‌ تعیین می‌کند. در حقیقت مقدار دهی Position با Static سبب می‌شود مرورگر محل عنصر را خود تعیین نماید.

Relative

مقدار Relative به معنی «وابسته» در هنگامی کاربرد دارد که بخواهیم محل قرارگیری عنصر را وابسته به محلی که مرورگر برای آن در نظر گرفته تغییر دهیم. مثلا می‌توان یک عنصر را از محل اصلی ۱۰ پیکسل به سمت راست و ۱۰ پیکسل به سمت پایین جابجا کرد. جابجا کردن عنصر در این روش با مقداردهی به ویژگی‌های Top، Bottom،‌Left و Right امکان‌پذیر است.

جابجا کردن عنصرهایی که به صورت Relative مقداردهی شده‌اند، محل اصلی آن عنصر را خالی نمی‌کند و فضای قبلی همچنان اشغال شده باقی می‌ماند.

Absolute

برای جابجا کردن یک عنصر وابسته به عنصر والد، از مقدار Absolute استفاده می‌شود. برای مثال می‌توان محل یک تصویر را ۱۰ پیکسل از سمت چپ و ۱۰ پیکسل از سمت پایین عنصر والد مشخص نمود. برای اینکه مشخص شود مکان‌یابی نسبت به کدامیک از عنصرهای والد انجام می‌پذیرد، لازم است تا عنصر والد موردنظر با ویژگی Relative مقداردهی شود.

به عبارت دیگر چنانچه بخواهیم، یک عنصر که چندین والد پی در پی دارد، را نسبت به یکی از والدهای آن جانمایی کنیم، ویژگی Position آن والد را مساوی Relative قرار می‌دهیم.

علاوه بر Relative، سایر مقادیر قابل قبول برای Position به جز Static نیز همین اثر را به دنبال دارند. ولی مقدار دهی جز با Relative اثرات جانبی دیگری نیز دارد که ممکن است مورد نیاز نباشند.

Fixed

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

نمونه‌های زیادی از این شیوه‌ی مقداردهی در سایت‌های مختلف قابل مشاهده است. برای مثال، پیام‌های خوش‌آمدگویی، پیشنهادهای جذاب، منوهای سایت و بخش‌های دیگر از این جمله هستند

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *