ویژگی position در CSS

ویژگی position در CSS

در تاریخ ۲۴ فروردین ۱۳۹۰ توسط امیر سروری 23 بازدید.

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

static

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

<div id="box1"><p>Box 1</p></div>
<div id="box2"><p>Box 2</p></div>
<div id="box3"><p>Box 3</p></div>
<div id="box4"><p>Box 4</p></div>

div
{
          position: static;
}

نمایش صفحه

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;
        }

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

نمایش صفحه

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

absolute

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

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

نمایش صفحه

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

fixed

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

در شکل زیر من مقدار position را برای Box نارنجی رنگ برابر fixed قرار داده‌ام.

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

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

نمایش صفحه

تهیه شده توسط : سوران

برچسب‌ها: CSS, آموزش css