loading...

ابزارها قالب

کسانی که با سی اس اس کار کرده اند به احتمال زیاد با ویژگی Position روبرو شده اند. در صفحات وب از این ویژگی بسیار استفاده می شود و شما خیلی راحت می توانید آن را پیدا کنید. اما از آن جایی که این ویژگی ک

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1103 شنبه 03 بهمن 1394 نظرات (0)

کسانی که با سی اس اس کار کرده اند به احتمال زیاد با ویژگی Position روبرو شده اند. در صفحات وب از این ویژگی بسیار استفاده می شود و شما خیلی راحت می توانید آن را پیدا کنید. اما از آن جایی که این ویژگی کمی نامفهوم به نظر می رسد ، تصمیم گرفتم آن را در یک مطلب نسبتا کوتاه توضیح دهم.

ویژگی Position

این ویژگی ، مشخص کننده ی مکان قرار گیری شی نسبت به صفحه است. مثلا ثابت یا متناسب ...

مقادیر ویژگی Position

  • ایستا (static): این مقدار ، مقدار پیش فرض به حساب می آید. تمام اشیا صفحه در حالت عادی به این شکل هستند.
  • متناسب (relative): این مقدار تقریبا شبیه به مقدار قبلی است با این تفاوت که در این حالت شما می توانید برای شی خود ویژگی های top , left , right , bottom را مشخص کنید و با این کار ابتدا مکان شی شما در جایی که باید باشد خالی می شود و سپس با توجه به مقادیری که به بالا ، پایین ، راست و چپ داده شده است به این جهت ها منتقل می شود.

<<<code>>>

before text

<div style="position: relative; top: 25px; left: 25; width: 100px; height: 100px; background: #000; opacity: 0.5"></div>

after text

<<</code>>>

مشاهده ی خروجی کد

با تغییر مقادیر قسمت قرمز رنگ متوجه می شوید که relative دقیقا چه خاصیتی را ایجاد می کند.

  • ثابت (fixed): این مقدار شی را ثابت قرار می دهد و شما می توانید با استفاده از ویژگی های top , bottom , right , left مکان آن را در صفحه مشخص کنید. این مقادیر برای حالت fixed مشخص کننده ی فاصله از اطراف صفحه هستند. با دیدن مثال زیر بهتر متوجه خواهید شد.

مثالی برای این مقدار

این مثال را یک بار در حالتی که مقادیر width و height وجود ندارند امتحان کنید.

  • مطلق (absolute): این مقدار حالت ثابتی است نسبت نزدیک ترین شی مادری که ویژگی position آن برابر مقدار relative است. تفاوت این مقدار با fixed در این است که حالت fixed باعث حرکت شی همراه صفحه می شود اما absolute نه. ویژگی مهم تر که در طراحی بسیار مورد استفاده قرار می گیرد مربوط به جمله اول است. در حالت fixed مکان شی نسبت به صفحه مشخص می شود اما در حالت absolute مکان نسبت به نزدیک ترین شی مادری که ویژگی position: relative دارد مشخص می شود. به مثال زیر توجه کنید:

<<<code>>>

before text<br />

<div style="position: absolute; right: 0; left: 0; top: 0; height: 100px; background: #0f0; opacity: 0.5"></div>

<div style="position: relative;">

   <div style="position: absolute; right: 0; left: 0; top: 0; height: 100px; background: #f00; opacity: 0.5"></div>

</div>

after text

<<</code>>>

مشاهده ی خروجی کد

قسمت های آبی رنگ دقیقا شیبه به هم نوشته شده اند و فقط تفاوت رنگ دارند.

بهترین راه فهمیدن خاصیت مقادیر مختلف یک ویژگی آزمایش و تمرین است.

مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 39
  • آی پی دیروز : 115
  • بازدید امروز : 252
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,865
  • بازدید ماه : 10,362
  • بازدید سال : 101,732
  • بازدید کلی : 1,788,167
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص