ویژگی background-position در Css
اردیبهشت ۱۸, ۱۴۰۳
ویژگی float و clear در Css
اردیبهشت ۱۸, ۱۴۰۳
در این بخش از آموزش Css خاصیت position را توضیح میدهیم.
از ویژگی position برای تعیین مکان یک عنصر استفاده میشود به عبارتی برای اینکه بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم از این ویژگی استفاده میکنیم. در طراحی سایت ویژگی Position از مهمترین کارها به حساب میآید. توجه داشته باشید که Position موقعیت یک عنصر در صفحه را ثابت میکنه ولی تو مرورگر اکسپلورر6 ساپورت نمیشود و معمولا با اختلالاتی روبرو میشود.
position شامل ویژگیهایی میباشد که عبارتند از top, left, right, bottom که هرکدام از این ویژگیها موقعیت خاصی را برای عنصر به وجود میآورند.
خاصیت top موقعیت عنصر موردنظر را به سمت بالا هدایت میکند.خاصیت bottom میزان فاصله عناصر را از پایین پنجره مرورگر مشخص میکند. خاصیت left موقعیت عنصر مورد نظر را به سمت چپ هدایت میکند و خاصیت right فاصله عنصر را از سمت راست صفحه تعیین میکند.
position می تواند دارای چهار مقدار باشد که عبارتنداز: relative, static, absolute, fixed.
static position: این ویژگی همیشه پیش فرض میباشد و تمام عناصر html به صورت static نوشته میشوند. در این ویژگی عناصر در همان جایی که در دستور نوشته شده اند به نمایش درمیآیند.
absolute position: این ویژگی این امکان را میدهد که یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، پایین، راست یا چپ صفحه نمایش دهیم.
fixed position: این ویژگی در طراحی سایت، موقعیت یک عنصر در صفحه را مشخص میکند مثلا وقتی صفحه را کوچک میکنیم یا به منطقهی خاصی از صفحه وبسایت میروییم عنصری که این خاصیت را دارا باشد به همان صورت قبلی باقی میماند و تغییر نمیکند.
مثال زیر کاربرد خاصیت fixed position در ویژگی position را نشان میدهد.
p.pos_fixed
{position:fixed;
top:30px;
right:5px;}
relative position:
با استفاده از این ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیتدهی میشود.
relative position: با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیتدهی میشود.
مثال زیر کاربرد خاصیت relative positon را در ویژگی Position در طراحی سایت نشان میدهد.
h2.pos_left
{position:relative;
left:-20px;
}
h2.pos_right
{position:relative;
left:20px;}
