امروز داشتم به این قضیه فکر می کردم که چرا طراحهای وب باید طوری صفحات وب رو طراحی کنن که توی همه بروزرهای وب یک نمایش ثابت داشته باشه و به قول خودمون از این مرورگر به اون مرورگر نترکه، اما باز به نتیجه خوبی نرسیدم چون که این مشکل همچنان گریبان این قشر زحمت کش جامعه رو گرفته و بیخیال مون نمیشه.

اینطوری شد که تصمیم گرفتم امروز راجع به تعیین موقعیت المانها یا تگهایی که برای ساختن صفحات وب از اون ها استفاده می شه صحبت کنم(در افشانی کنم). 

اتریبیوت position در css خاصیتی هست که میتونه موقعیت object های یک صفحه html رو نسبت به هم تعیین کنه:

• position:static

خاصیت ثابت بودن که در واقع به صورت default به همه تگها داده میشه و تاثیری در نمایش طبیعی صفحهات وب نداره.

به مثال زیر توجه کنید:

کد html:

نمایش:



همانطور که در عکس مشخص است هردو مربع قرمز و زرد بدون اینکه
موقعیت خاصی را برای آنها تعیین کنیید در کنار هم ایستاده اند.

• position:relative

خاصیت نسبی بودن که با استفاده از اون موقعیت المان ما نسبت به
پدرش محاسبه میشه. میتونیم المان مورد نظر مون رو با
خاصیت های left، right،
top، bottom از چهار طرف تکون بدیم.

به مثال زیر توجه کنید:

کد html:

نمایش:



همانطور که در عکس مشخص است مربع  زرد به اندازه
-۵px از چپ و -۵px از
بالا از درون مربع قرمز بیرون زده است اما به این نکته توجه کنید که قبل از
آن هردو از محیط سبز رنگ به اندازه ۲۵px از بالا
و ۲۵px از چپ تاثیر گرفته اند.

• position:absolute

خاصیت مطلق بودن که میتونیم المان مورد نظر مون رو بدون اینکه هیچ توجهی به بقیه المان های صفحه داشته باشیم تکون بدیم و هر جای صفحه که مورد نظر مون هست ظاهرش کنیم.

در واقع باید اینطوری فرض کنید که هیچ چیزی نمیتونه موقعیت المان مورد نظر شما رو به جز چهار ضلع صفحه بروزتون تحت تاثیر قرار بده.

به مثال زیر توجه کنید:

کد html:

      



some text


some text


some text


some text


some text


some text

نمایش:



همانطور که در عکس مشخص است مربع  زرد به اندازه
۵px از بالا و ۳۰۰px از چپ نسبت به
صفحه مرورگر ایستاده است.
در واقع بدون توجه به بقیه محتوای صفحه موقعیت خود را انتخاب کرده است.

• position:fixed

خاصیت ثابت بودن که تا حدودی شبیه خاصیت مطلق هست با این تفاوت که زمانی که میخوایم در صفحه مرورگر اسکرول کنیم object مورد نظرمون ثابت سر جای خودش وایمیسه.

به مثال زیر توجه کنید:

کد html:

      



some text


some text


some text


some text


some text


some text

نمایش:



همانطور که در عکس مشخص است مربع  زرد به اندازه
۵px از بالا و ۳۰۰px از چپ نسبت به
صفحه مرورگر ایستاده است.
با این تفاوت که زمانی که  اسکرول هم میکنیم جای ثابتی خواهد داشت و
در واقع جا نمی ماند.

البته باید این نکته رو خدمتتون عرض کنم در IE6 خاصیت ثابت بودن تعریف نشده و
از مرورگر IE7 به بالا ا ین خاصیت قابل ترجمه است.

• position:inherit

خاصیت ارث بردن که مشخص می کنه المان مورد نظر ما از پدر خودش نوع خاصیت اش رو به ارث میبره.

به مثال زیر توجه کنید:

کد html:

نمایش:


همانطور که در عکس مشخص است مربع  زرد به اندازه
۲۵px از بالا و ۲۵px از چپ نسبت به
مربع قرمز رنگ ایستاده است در واقع با توجه به نوع
relative پدر خود موقعیتش را انتخاب کرده است.