92-11-10، 03:08 عصر
[rtl] تغيير موقعيت عناصر صفحه با استفاده از CSS[/rtl]
[rtl]position[/rtl]
[rtl]ويژگي position به ما اجازه مي دهد تا تعيين كنيم كه آيا مي خواهيم موقعيت يك عنصر در صفحه مشخص شود يا نه. اگر مي خواهيم آن عنصر موقعيت مشخصي داشته باشد موقعيت عنصر را در صفحه تعيين مي كند . چندين مقدار را مي توان براي اين ويژگي قرار داد. در اينجا مي توانيد اين مقادير را با كمي توضيح در مورد هر كدام ببينيد: [/rtl]
[rtl] [/rtl]
[rtl]static[/rtl]
[rtl]اين مقدار پيش فرضي است كه در صورت تعريف نشدن position در صفحه استفاده مي شود. با اين مقدار اجزا در همان جايي كه كد آنها را مي نويسيد ديده مي شوند.[/rtl]
[rtl] [/rtl]
[rtl]absolute:[/rtl]
[rtl]اين مقدار به ما اجازه مي دهد تا يك عنصر از صفحه را در هر موقعيتي نسبت به بالا، راست، پايين يا چپ صفحه كه بخواهيم نمايش دهيم.[/rtl]
[rtl] [/rtl]
[rtl]fixed[/rtl]
[rtl]اين گزينه به ما اجازه مي دهد تا موقعيت يك عنصر صفحه را در پنجره مرورگر مشخص كنيم. در صورتي كه براي يك عنصر از اين ويژگي استفاده كنيم، موقعيت آن عنصر حتي در صورتي كه به بالا و پايين صفحه برويم يا اندازه
پنجره مرورگر را تغيير دهيم به همان صورت قبلي باقي مي ماند. البته اينترنت اكسپلورر در ويندوز از اين ويژگي پشتيباني نمي كند ولي اينترنت اكسپلورر در مكينتاش همچنين مرورگرهاي نت اسكيپ از اين ويژگي پشتيباني مي كنند. [/rtl]
[rtl]static[/rtl]
[rtl] اين ويژگي در حقيقت مشخص مي كند كه عنصر مربوطه بايد در محلي كه كد آن نوشته شده نمايش داده شود . وقتي كه از اين ويژگي استفاده مي كنيم ويژگيهاي top, left, bottom, right كاربردي ندارند.[/rtl]
[rtl]fixed [/rtl]
[rtl]چون اينترنت اكسپلورر بيشتر از ساير مرورگرها مورد استفاده قرار مي گيرد و از ويژگي fixed در CSS پشتيباني نمي كند زياد به اين ويژگي نمي پردازيم. اما در هر صورت ويژگي جالبي است. در اينجا فقط به ذكر يك مثال بسنده
مي كنيم:[/rtl]
[rtl]در اين مثال از ويژگي position:fixed براي تعيين موقعيت يك DIV استفاده مي كنيم: [/rtl]
[ltr]<div style="position:fixed; top:50%; float:right"> [/ltr]
[rtl]مي خواهيد ببينيد اين ويژگي چگونه كار مي كند لينك زير را با يكي از مرورگرهاي Opera, Netscape يا Firefox مشاهده كنيد و صفحه را با استفاده از اسكرول بار به بالا و پايين ببريد:[/rtl]
[rtl] [/rtl]
[rtl]absolute[/rtl]
[rtl]ويژگي position:absolute مشخص مي كند كه عنصر مربوطه بايد در محل تعيين شده به نمايش در آيد نه محلي كه كد آن نوشته شده است.[/rtl]
[rtl] در اينجا مي توانيد يك مثال را در مورد استفاده از ويژگي position:absolute در صفحه ببينيد: [/rtl]
[ltr]<div style="position:absolute; top:65px; right:20px; border:double
#0033cc; width:350px; color:#ffff00; background-color:#33cccc;
height: 40px;"> اين در موقعيت تعيين شده در كد آن نمايش داده مي شود </div> [/ltr]
[rtl]همانطور كه در كد بالا مي بينيد براي DIV موقعيتي با فاصله 65 پيكسل از بالاي صفحه و 20 پيكسل از سمت راست صفحه تعيين كرده ايم. با كليك كردن بر روي لينك زير مي توانيد نتيجه را مشاهده كنيد:[/rtl]
[rtl]top[/rtl]
[rtl]اين ويژگي موقعيت يك عنصر را از بالاي صفحه تعيين مي كند .( ويژگيهاي top, left, bottom, right بيشتر زماني مورد استفاده قرار مي گيرند كه براي يك عنصر ويژگي position تعيين شده باشد .)[/rtl]
[rtl]در مثال قبل همانطور كه ملاحظه مي كنيد از ويژگي top:65px استفاده شده است كه اين ويژگي معين مي كند كه DIV با فاصله 65 پيكسل از بالاي پنجره مرورگر به نمايش در مي آيد.[/rtl]
[rtl]مقداري كه براي ويژگيهاي top, bottom, left, right در نظر گرفته مي شود به صورت مي تواند باشد . يا صورت عددي در واحد پيكسل كه در اين صورت بايد پس از عدد مربوطه از حروف اختصاري PX استفاده شود يا بهصورت درصد كه پس از عدد با يد از علامت درصد (%) استفاده شود.[/rtl]
[rtl]bottom
كاربردي همانند ويژگي بالا دارد با اين تفاوت كه ميزان فاصله عناصر را از پايين پنجره مرورگر مش خص مي كند .در
مثال بعدي از اين ويژگي استفاده خواهيم كرد.[/rtl]
[rtl]right
اين ويژگي فاصله عناصر را از سمت راست صفحه تعيين مي كند. همانطور كه در مثال قبل مي بينيد، از اين ويژگي به صورت right:20px استفاده شده است يعني DIV مربوطه با فاصله 20 پيكسل از سمت راست پنجره مرورگر قرار خواهد گرفت.cms[/rtl]
[rtl]left
اين ويژگي موقعيت عنصر را از سمت چپ پنجره مرورگر تعيين مي كند. [/rtl]
[rtl]در مثال زير از ويژگيهاي left و bottom براي همان DIV مثال قبل استفاده مي كنيم: [/rtl]
[ltr]<div style="position:absolute; bottom:65px; left:20px; border:double
#0033cc; width:350px; color:#ffff00; background-color:#33cccc;
height: 40px;"> اين در موقعيت تعيين شده در كد آن نمايش داده مي شود </div> [/ltr]
[rtl]به اندازه 65 پيكسل از پايين و 20 پيكسل از سمت چپ پنجره مرورگر فاصله دارد.[/rtl]
[rtl]position[/rtl]
[rtl]ويژگي position به ما اجازه مي دهد تا تعيين كنيم كه آيا مي خواهيم موقعيت يك عنصر در صفحه مشخص شود يا نه. اگر مي خواهيم آن عنصر موقعيت مشخصي داشته باشد موقعيت عنصر را در صفحه تعيين مي كند . چندين مقدار را مي توان براي اين ويژگي قرار داد. در اينجا مي توانيد اين مقادير را با كمي توضيح در مورد هر كدام ببينيد: [/rtl]
[rtl] [/rtl]
[rtl]static[/rtl]
[rtl]اين مقدار پيش فرضي است كه در صورت تعريف نشدن position در صفحه استفاده مي شود. با اين مقدار اجزا در همان جايي كه كد آنها را مي نويسيد ديده مي شوند.[/rtl]
[rtl] [/rtl]
[rtl]absolute:[/rtl]
[rtl]اين مقدار به ما اجازه مي دهد تا يك عنصر از صفحه را در هر موقعيتي نسبت به بالا، راست، پايين يا چپ صفحه كه بخواهيم نمايش دهيم.[/rtl]
[rtl] [/rtl]
[rtl]fixed[/rtl]
[rtl]اين گزينه به ما اجازه مي دهد تا موقعيت يك عنصر صفحه را در پنجره مرورگر مشخص كنيم. در صورتي كه براي يك عنصر از اين ويژگي استفاده كنيم، موقعيت آن عنصر حتي در صورتي كه به بالا و پايين صفحه برويم يا اندازه
پنجره مرورگر را تغيير دهيم به همان صورت قبلي باقي مي ماند. البته اينترنت اكسپلورر در ويندوز از اين ويژگي پشتيباني نمي كند ولي اينترنت اكسپلورر در مكينتاش همچنين مرورگرهاي نت اسكيپ از اين ويژگي پشتيباني مي كنند. [/rtl]
[rtl]static[/rtl]
[rtl] اين ويژگي در حقيقت مشخص مي كند كه عنصر مربوطه بايد در محلي كه كد آن نوشته شده نمايش داده شود . وقتي كه از اين ويژگي استفاده مي كنيم ويژگيهاي top, left, bottom, right كاربردي ندارند.[/rtl]
[rtl]fixed [/rtl]
[rtl]چون اينترنت اكسپلورر بيشتر از ساير مرورگرها مورد استفاده قرار مي گيرد و از ويژگي fixed در CSS پشتيباني نمي كند زياد به اين ويژگي نمي پردازيم. اما در هر صورت ويژگي جالبي است. در اينجا فقط به ذكر يك مثال بسنده
مي كنيم:[/rtl]
[rtl]در اين مثال از ويژگي position:fixed براي تعيين موقعيت يك DIV استفاده مي كنيم: [/rtl]
[ltr]<div style="position:fixed; top:50%; float:right"> [/ltr]
[rtl]مي خواهيد ببينيد اين ويژگي چگونه كار مي كند لينك زير را با يكي از مرورگرهاي Opera, Netscape يا Firefox مشاهده كنيد و صفحه را با استفاده از اسكرول بار به بالا و پايين ببريد:[/rtl]
[rtl] [/rtl]
[rtl]absolute[/rtl]
[rtl]ويژگي position:absolute مشخص مي كند كه عنصر مربوطه بايد در محل تعيين شده به نمايش در آيد نه محلي كه كد آن نوشته شده است.[/rtl]
[rtl] در اينجا مي توانيد يك مثال را در مورد استفاده از ويژگي position:absolute در صفحه ببينيد: [/rtl]
[ltr]<div style="position:absolute; top:65px; right:20px; border:double
#0033cc; width:350px; color:#ffff00; background-color:#33cccc;
height: 40px;"> اين در موقعيت تعيين شده در كد آن نمايش داده مي شود </div> [/ltr]
[rtl]همانطور كه در كد بالا مي بينيد براي DIV موقعيتي با فاصله 65 پيكسل از بالاي صفحه و 20 پيكسل از سمت راست صفحه تعيين كرده ايم. با كليك كردن بر روي لينك زير مي توانيد نتيجه را مشاهده كنيد:[/rtl]
[rtl]top[/rtl]
[rtl]اين ويژگي موقعيت يك عنصر را از بالاي صفحه تعيين مي كند .( ويژگيهاي top, left, bottom, right بيشتر زماني مورد استفاده قرار مي گيرند كه براي يك عنصر ويژگي position تعيين شده باشد .)[/rtl]
[rtl]در مثال قبل همانطور كه ملاحظه مي كنيد از ويژگي top:65px استفاده شده است كه اين ويژگي معين مي كند كه DIV با فاصله 65 پيكسل از بالاي پنجره مرورگر به نمايش در مي آيد.[/rtl]
[rtl]مقداري كه براي ويژگيهاي top, bottom, left, right در نظر گرفته مي شود به صورت مي تواند باشد . يا صورت عددي در واحد پيكسل كه در اين صورت بايد پس از عدد مربوطه از حروف اختصاري PX استفاده شود يا بهصورت درصد كه پس از عدد با يد از علامت درصد (%) استفاده شود.[/rtl]
[rtl]bottom
كاربردي همانند ويژگي بالا دارد با اين تفاوت كه ميزان فاصله عناصر را از پايين پنجره مرورگر مش خص مي كند .در
مثال بعدي از اين ويژگي استفاده خواهيم كرد.[/rtl]
[rtl]right
اين ويژگي فاصله عناصر را از سمت راست صفحه تعيين مي كند. همانطور كه در مثال قبل مي بينيد، از اين ويژگي به صورت right:20px استفاده شده است يعني DIV مربوطه با فاصله 20 پيكسل از سمت راست پنجره مرورگر قرار خواهد گرفت.cms[/rtl]
[rtl]left
اين ويژگي موقعيت عنصر را از سمت چپ پنجره مرورگر تعيين مي كند. [/rtl]
[rtl]در مثال زير از ويژگيهاي left و bottom براي همان DIV مثال قبل استفاده مي كنيم: [/rtl]
[ltr]<div style="position:absolute; bottom:65px; left:20px; border:double
#0033cc; width:350px; color:#ffff00; background-color:#33cccc;
height: 40px;"> اين در موقعيت تعيين شده در كد آن نمايش داده مي شود </div> [/ltr]
[rtl]به اندازه 65 پيكسل از پايين و 20 پيكسل از سمت چپ پنجره مرورگر فاصله دارد.[/rtl]
