ویژگی position در CSS

چهارشنبه, ۲۴ام فروردین , ۱۳۹۰ | ۳۸ دیدگاه

این ویژگی نحوه قرارگیری کادر (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;
   }

css position

نمایش صفحه

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

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

css position

نمایش صفحه

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

absolute

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

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

css position

نمایش صفحه

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

fixed

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

css position

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

css position

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

css position

توجه داشته باشید که اینترنت اکسپلورر ۶ و قبل از آن از مقدار fixed پشتیبانی نمی‌کنند.

نمایش صفحه

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

Be Sociable, Share!


۳۸ دیدگاه

  1. […] کامل در ITTutorial مرجعی برای طراحان وب سایت برچسب ها: آموزش آی تی, position, […]



  2. […] position در CSS | پارسه آی تی: ۲۰۱۱-Apr-13 […] کامل در ITTutorial مرجعی برای طراحان وب سایت برچسب ها: […]




  3. بهنام
    ۲۵ فروردین ۱۳۹۰

    خوب بود …




  4. جعفر
    ۲۵ فروردین ۱۳۹۰

    سلام
    دستتون درد نکنه
    عالی بود




  5. اسماعیل آجریان
    ۲۵ فروردین ۱۳۹۰

    ممنون




  6. سارا
    ۲۵ فروردین ۱۳۹۰

    ممنون




  7. حامد
    ۲۵ فروردین ۱۳۹۰

    ممنون امیر جان
    مطلب فوق العاده مفیدی برای طراحی وبه و خیلی جاها به کار میاد. تا حالا مطلب خاصی در این مورد منتشر نشده بود.

    یه نکته مهم : position:fix توسط ie6پشتیبانی نمیشه. که البته با جاوا اسکریپت این مشکل حل میشه.




  8. مینو
    ۲۶ فروردین ۱۳۹۰

    خیلی عالیه
    tnx alo0o0ot




  9. وحید
    ۲۶ فروردین ۱۳۹۰

    به نظرم در قسمت absolute یک اشتباهی شده(شاید اشتباه درکی من بوده!)
    وقتی مقدار را برابر absolute قرار می دهیم باکس ما نسبت به کادری که داخلش هست در بالا قرار می گیره ولی وقتی مقدارهای top-right و… را برایش تعریف می کنیم باکس ما نسبت به کل صفحه تغییر مکان میده.البته من بصورت تجربی به این نتیجه رسیدم.
    l—–
    ممنون از این آموزش کاربردی.لطف کنید این رویه کاری را دنبال کنید و کدهای خاص سی اس اس را معرفی کنید




  10. منوچهر
    ۲۷ فروردین ۱۳۹۰

    ممنون
    بسیار کاربردی بود . چون تو طراحی یک وبسایت بهمین مشکل برخورد کردم. که با کمک این مطلب حل شد




  11. محسن
    ۲۷ فروردین ۱۳۹۰

    سلام.

    خیلی ساده و روون توضیح داده بودین.
    مرسی…




  12. سوران
    ۲۷ فروردین ۱۳۹۰

    از تمام عزیزانی که نظر دادن تشکر می کنم و خوشحالم که این مطلب تونسته به درد دوستان بخوره.
    در جواب جناب وحید باید عرض کنم که دقیقا متوجه مشکل ایشون نشدم اگر بتونین کدش رو بفرستین خیلی راحت میشه مشکلتون رو برطرف کرد. اما مطلبی رو باید عرض کنم. اگر شما کادر اصلی (در اینجا کادر با حاشیه خط چین و رنگ قرمز) رو با استفاده از خاصیت margin تغییر مکان بدین مثلا ۱۰۰ پیکسل به راست بیارین Box 3 نسبت به همون مکان اولیه کادر اصلی محاسبه میشه نه مکان تغییر داده شده با margin. اما اگه ویژگی position در کادر اصلی رو absolute یا relative قرار بدین بعد کادر اصلی رو با مثلا left جابجا کنین این مشکل پیش نمیاد و مکان Box 3 نسبت به مکان جدید کادر اصلی محاسبه خواهد شد. همین کاری که من در این کدها انجام دادم.
    امیدوارم این توضیحات بتونه مشکل شما رو برطرف کنه در غیر این صورت باید کدهاتون رو ببینم تا دقیقا متوجه مشکل شما بشم.




  13. mohammad
    ۳۰ فروردین ۱۳۹۰

    کاش ماهم css می دانستیم 😉




  14. یاسین
    ۵ اردیبهشت ۱۳۹۰

    سلام
    بسیار عالی توضیح داده بودید
    از این آموزش ها بیشتر در سایت قرار دهید




  15. ali smith
    ۷ اردیبهشت ۱۳۹۰

    سلام

    چرا دوست من میشه تو IE 6 هم از fixed استفاده کرد اما خوب hack خاص خودش رو داره.

    از این لینک می تونید کمک بگیرید :

    http://www.bennadel.com/blog/1735-Using-CSS-Fixed-Position-Elements-Across-Browsers-Without-Javascript.htm

    البته اینم بگم من خودم کاربر webkit engine هستم وحتی از IE9 هم استفاده نمی کنم .

    موفق باشید




  16. Mohammad
    ۱۴ اردیبهشت ۱۳۹۰

    kheyli khob bood.kheyli komak kard




  17. ali
    ۱۷ اردیبهشت ۱۳۹۰

    سلام
    خیلی خوب بود مرسی
    بازم از این کارا بکنید




  18. shahrokhi
    ۱۸ اردیبهشت ۱۳۹۰

    خیلی جالب بود . ممنون از وب سایت خوبتون




  19. tweb
    ۱۸ اردیبهشت ۱۳۹۰

    خیلی ممنونم
    خیلی عالی بود دوست عزیز
    واقعا لطف بزرگی کردی




  20. عسل
    ۲۵ اردیبهشت ۱۳۹۰

    سلام
    بعضی از مطالب سایت شما رو خوندم و ممنونم بابت مفید بودن مطالبتون
    من گرافیستم ولی دوره طراحی وب و تازه تموم کردم یه سایت استاتیک و واسه یه مشتری دارم طراحی می کنم می خواهم برای خودم یه سایت طراحی کنم که توش کارهای گرافیکی خودم باشه مثل ایکون های وب و هدر و…
    اما نمی دونم سایتم انگلیسی باشه بهتر یا فارسی
    اخه خودم بیشتر از سایتهای خارجی استفاده می کنم
    می شه شما راهنمایی ام کنید
    ممنون می شم




  21. امیر سروری
    ۲۵ اردیبهشت ۱۳۹۰

    عسل@ زبان سایت به این بستگی داره که مخاطبان شما بیشتر از کدوم کشورها باشن و زبان اونها چی باشه ، اگر در ایران هستید و از این راه میخواید مشتریان داخل ایران رو جذب کنید پس بهتره به نظر من فارسی باشه تا بتونه توی موتورهای جستجو هم روش کار کرد و از این راه جذب مخاطب کرد .




  22. shahla
    ۲۷ اردیبهشت ۱۳۹۰

    mer30 khob bod




  23. naser
    ۴ مرداد ۱۳۹۰

    مررررررررررررررررررررررررررررررررررررررررررررررررررررر
    سیییییییییییییییییییییییییییییییییییییییییییییییییی




  24. nila
    ۱۰ مرداد ۱۳۹۰

    با تشکر فراوان مثال هاتون خیلی عالی بود




  25. امیرحسین جلوداری
    ۲۴ مرداد ۱۳۹۰

    سلام … خیلی خیلی ممنون …
    واقعا من تو این position ها مشکل داشتم و با خوندن مقاله ی شما تقریبا میشه گفت مشکلم حل شد… خیلی عالی و حرفه ای توضیح دادین …

    با تشکر … یا علی




  26. sAbEr
    ۳۰ مرداد ۱۳۹۰

    با سلام به ادمین محترم
    آیا همه ی مرورگرها relative رو ساپورت می کنن؟؟
    با تشکر



دیدگاه خود را بنویسید