نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

آموزش Position در CSS

امیرمسعود ایرانی | شنبه, ۱۰ آبان ۱۳۹۳، ۰۵:۵۴ ب.ظ | ۱ نظر

تعیین محل عناصر 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، عنصر وابسته به صفحه‌ی مرورگر مکان‌یابی خواهد شد و محل اصلی آن خالی می‌گردد. کاربرد این مقدار هنگامی است که بخواهیم یک عنصر همیشه فارغ از محل میله‌های جابجایی کنار صفحه، در محلی خاص قابل مشاهده باشد.

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

  • امیرمسعود ایرانی

absolute

css

position

relative

نظرات  (۱)

خیلی وبلاگ عالی و خوبی داری لذت بردم واقعا من هم البته یه وب دارم که متاسفانه کسی به من سر نمی زنه و تنهام دوست داری بیا نیامدی هم اشکال نداره بازم ممنون موفق باشی

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی