تبلیغات

آخرین ارسال های انجمن

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788

12 3 4 5 6 7 8 9 10 11 »

ویژگی Position در Css و مقادیر آن

          حمیدرضا 
            بازدید : 1449
          شنبه 03 بهمن 1394
           نظرات (0)
        

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

ویژگی Position

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

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

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

<<<code>>>

before text

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>

after text

<<</code>>>

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

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

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