ویژگی position در CSS

[حسین هادیان 30]

سلام به همه دوستان

باز هم یه مقاله جالب از سایت www.ittutorial.ir :

ویژگی position در CSS :

ین ویژگی نحوه قرارگیری کادر (box) را مشخص می‌کند و دارای ۴ مقدار static، absolute، fixedوrelative می‌باشد که در زیر هر کدام را توضیح می‌دهیم. static

مقدار پیش فرض برای این ویژگی static است. کادرهایی که مکان آنها به طور معمول با توجه به نحوه قرارگیری آنها در کنار کادرهای دیگر مشخص میشود این مقدار را می‌پذیرند. ویژگی top، right، bottom، left و z-index بر روی اینگونه کادرها تاثیری ندارند. اینگونه کادرها نمی‌توانند تغییر مکان داده شوند.

1

Box 1

2

Box 2

3

Box 3

4

Box 4

 div
{position: static; }

[/align] [align=CENTER]نمایش صفحه

[/align] [align=CENTER]نمایش صفحه relative

کادرهایی که مقدار position آنها relative باشد در ابتدا مکان قرار گیری آنها به طور معمول (همانند مقدار static) تعیین می‌شود و سپس با ویژگی‌های top، right، bottom و left می‌توان مکان آنها را نسبت به مکان اولیه قرارگیرشان تغییر داد.

در کدهای زیر من مقدار position را برای Box 2 و Box 4 برابر relative قرار داده‌ام.

 div#box2
{
position:  relative;
left: 50px;
}
div#box4
{
position:  relative;
top: 40px;
right: 30px;
} 

شکل آن در زیر می‌آید.

[/align] [align=CENTER]نمایش صفحه

[/align] [align=CENTER]نمایش صفحه

اگر کدها را دوباره نگاه کنید و همانطور که در شکل هم مشخصه من Box 2 را ۵۰ پیکسل از سمت چپ خودش فاصله داده‌ام. برای Box 4 هم همانطور که می‌بینید ۴۰ پیکسل از مکان طبیعی خودش از بالا و ۳۰ پیکسل از راست فاصله گرفته است. اگر شکل ۲ را با شکل ۱ مقایسه کنید متوجه می‌شوید که هنگامی که مقدار position برابر relative باشد می‌توانیم کادرها را نسبت به مکان اولیه خودشان (بطور پیش فرض حالت static) جابجا کنیم.

absolute

این مقدار مکان قرار گیری کادر را به طور مطلق نسبت به کادر دربرگیرنده آن تعیین می‌کند. در اینجا نیز مکان کادر با استفاده از قواعد top، right، bottom و left تعیین می‌شود.

شکل ۱ را دوباره در نظر بگیرید. اکنون مقدار position مربوط به Box 3 را برابر absolute قرار می‌دهیم و مکان آن را به صورت زیر جابجا می‌کنیم.

 div#box3 
{
position: absolute;
top: 20px;
left: 120px; 
} 

[/align] [align=CENTER]نمایش صفحه

[/align] [align=CENTER]نمایش صفحه

همانطور که می‌بینید مکان Box 3 بدون در نظر گرفتن Boxهای دیگر و به صورت مطلق فقط نسبت به کادری که آن را دربرگرفته تعیین شده است یعنی مکان آن نسبت به گوشه بالا و سمت چپ کادر دربرگیرنده ۱۲۰ پیکسل از چپ و ۲۰ پیکسل از بالا فاصله گرفته است. همانطور که در شکل هم می‌بینید چون Box 3 به صورت مطلق مکان‌دهی شده است بر نحوه قرارگیری Boxهای مجاور تاثیر نمی‌گذارد و همینطور Boxهای مجاور نیز که ویژگی position آنها مقداردهی نشده مکان و نحوه قرارگیری Box 3 را تحت تاثیر قرار نمی‌دهند.

fixed

این مقدار مکان قرارگیری کادر را نسبت به پنجره مرورگر تعیین می‌کند و در اینجا نیز می‌توان با استفاده از قواعد top، right، bottom و left مکان آن را مشخص نمود. اینگونه کادرها همیشه در جای خود ثابت می‌مانند و اگر صفحه را به بالا، پایین، چپ یا راست هم جابجا کنید (در صورتی که صفحه بتواند در جهات مختلف بوسیله اسکرول بار جابجا شود) باز هم مکان آنها نسبت به پنجره مرورگر تغییر نمی‌کند.

[/center]

[/center]

حالا در شکل زیر پنجره را به سمت راست اسکرول می‌کنم. توجه نمایید که باز هم مکان Box نارنجی نسبت به صفحه مرورگر تغییر نمی‌کند.

[align=CENTER]نمایش صفحه

منبع

[/align]