در بخش خاصیت position در صفحه قبل ، اشاره کردیم چنانچه خاصیت position بر روی یکی از مقادیر relative , absolute یا fixed تنظیم شود می توان توسط خواص left , right , top و bottom مختصات دقیق محل قرار گیری عنصر را در صفحه یا عنصر در بر گیرنده آن تعیین کرد . در این بخش به معرفی ۴ خاصیت اشاره شده برای تنظیمات مکان قرار گیری عناصر می پردازیم :
نکات :
در صورتی که خاصیت position بر روی مقدار static تنطیم شده باشد ، تعیین مختصات برای عناصر بی اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتویات صفحه نمایش می دهد .
در حالتی که خاصیت position بر روی مقدار relative تنظیم شود ، مختصات تعیین شده در این قسمت ، نسبت به عنصر در برگیرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هایی که خاصیت position بر روی مقادیر absolute یا fixed تعیین شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود .
برای درک بهتر به مثال های خاصیت position در صفحه قبل دقت کنید .
left:مختصات نقطه شروع عنصر را از سمت چپ در صفحه یا عنصر در برگیرنده عنصر مورد نظر را به یکی از روش های زیر تعیین می کند :
– auto : در این حالت مرورگر به صورت اتوماتیک بر حسب محتویات صفحه ، نقطه شروع سمت چپ عنصر را تنظیم می کند .
– length : در این حالت مختصات نقطه شروع عنصر را در سمت چپ بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : در این حالت بر حسب درصد تعیین شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت چپ تعیین می شود . برای مثال اگر مقدار ۱۰% تعیین شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت چپ تعیین می شود .
right:مختصات نقطه شروع عنصر را از سمت راست در صفحه یا عنصر در برگیرنده عنصر مورد نظر را به یکی از روش های زیر تعیین می کند :
– auto : در این حالت مرورگر به صورت اتوماتیک بر حسب محتویات صفحه ، نقطه شروع سمت راست عنصر را تنظیم می کند .
– length : در این حالت مختصات نقطه شروع عنصر را در سمت راست بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : در این حالت بر حسب درصد تعیین شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت راست تعیین می شود . برای مثال اگر مقدار ۱۰% تعیین شود و عرض کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت راست تعیین می شود
top:مختصات نقطه شروع عنصر را از سمت بالا در صفحه یا عنصر در برگیرنده عنصر مورد نظر را به یکی از روش های زیر تعیین می کند :
– auto : در این حالت مرورگر به صورت اتوماتیک بر حسب محتویات صفحه ، نقطه شروع را از سمت بالای عنصر تنظیم می کند .
– length : در این حالت مختصات نقطه شروع عنصر را در سمت بالا بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : در این حالت بر حسب درصد تعیین شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت بالا تعیین می شود . برای مثال اگر مقدار ۱۰% تعیین شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت بالا تعیین می شود .
bottom:مختصات نقطه شروع عنصر را از سمت پایین در صفحه یا عنصر در برگیرنده عنصر مورد نظر را به یکی از روش های زیر تعیین می کند :
– auto : در این حالت مرورگر به صورت اتوماتیک بر حسب محتویات صفحه ، نقطه شروع را از سمت پایینی عنصر تنظیم می کند .
– length : در این حالت مختصات نقطه شروع عنصر را در سمت پایین بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : در این حالت بر حسب درصد تعیین شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت پایین تعیین می شود . برای مثال اگر مقدار ۱۰% تعیین شود و ارتفاع کل عنصر ۲۰۰px باشد ، نقطه شروع ۲۰px از سمت پایین تعیین می شود .
مثال : در مثال زیر برای جدول مقدارهای top و left را تعیین کرده ایم . دقت کنید که مقدار خاصیت position بروری relative تنظیم شده و مختصات مکان جدول با توجه عنصر در بر گیرنده آن یعنی خانه جدول تنظیم می شود :
| < table style=”border: solid 2px blue; width: 200px; height: 100px; top: 25px; left: 200px; position: relative” cellspacing=”0″ > < tr > < td style=”border: solid 2px blue” > Cell 1 < /td > < td style=”border: solid 2px blue” > Cell 2 < /td > < /tr > < /table > |
