صفت Position
با صفت Position می توانیم تعیین کنیم یک عنصر در صفحه در چه موقعیتی نمایش داده شود . صفت Position دارای ویژگیهای زیر می باشد که به طور مختصر برای شما توضیح میدهم :
Static : این مقدار پیش فرضی است که در صورت تعریف نشدن صفت Position در صفحه استفاده می شود .با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند .
Absolute : این مقدار به ما اجازه میدهد تا یک عنصر را در هرموقعیتی نسبت به بالا ، راست ،پایین و چپ صفحه که بخواهیم نمایش دهیم .
Relative : حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20 مقدار 20 پیکسل به موقعیت عادی اضافه می کند.
Fixed : این گزینه به ما اجازه میدهد تا موقعیت عنصر یک صفحه را در پنجره مرورگر مشخص کنیم. در صورتیکه برای یک عنصر از این ویژگی استفاده کنیم موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مروگر را تغییر دهیم به همان صورت قبلی باقی می ماند.البته ویندوز اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند .
با چند مثال ساده با کاربرد ویژگیهای توضیح داده شده بیشتر آشنا می شوید .
ویژگی Absolute :
همانطور که در بالا توضیح دادم با این ویژگی موقعیت یک عنصر را در صفحه تعیین می کنیم .
h2
{
position : absolute ;
left : 100px ;
top : 150px ;
}
ویژگی Relative :
حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20 مقدار 20 پیکسل به موقعیت عادی اضافه می کند.
{
position : relative ;
left :-20px ;
}
h2.pos_right
{
position : relative ;
left : 20px ;
}
ویژگی Fixed :
موقعیت عنصر در صفحه ثابت خواهد بود . یعنی در صورت بالا و پایین کردن صفحه عنصر مشخص شده ثابت خواهد بود .
{
position : fixed ;
top : 30px ;
right : 5px ;
}
آموزش CSS - مشخص کردن عرض و ارتفاع جدول در CSS