در این قسمت از آموزش css با امکان جابجا کردن المان ها در صفحات وب به وسیله css آشنا می شویم. این کار را به کمک دستور position انجام می دهیم.
دستور position
همان طوری که از نام آن پیداست این دستور موقعیت المان ها را مشخص می کند. دستور position چهار حالت مختلف دارد.
اولین حالت، موقعیت static است که در واقع همان حالت پیش فرض این دستور است و تاثیری در موقعیت المان ندارد.
حالت دوم relative است. در این حالت 4 مقدار right , left , top و bottom را می توانیم برای آن مشخص کنیم.
html code:
<div class=”default”>متن المان اول</div>
<div class=”relative”>متن المان دوم</div>
css code:
.default {
position: static;
} .relative {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
همان طور که در مثال فوق مشاهده می کنید ما به div اول موقعیت پیش فرض داده ایم.
معنی عدد منفی در موقعیت
در حالت عادی زمانی که شما مثلا ۲۰ پیکسل را بروی فاصله از بالا بنویسید، سی‌اس‌اس از بالاترین نقطه، ۲۰ پیکسل پایین می‌آید تا بین بالاترین سطح و المان شما ۲۰ پیکسل فاصله باشد. اما زمانی که شما به جای ۲۰ عدد ۲۰- را بنویسید، سی اس اس المان شما را در جهت خلاف بالا می‌برد؛ یعنی به جای حرکت به سمت پایین به اندازه‌ی ۲۰ پیکسل به بالا حرکت می‌کند.
حالت های سوم و چهارم را در جلسه بعدی خواهیم گفت.