آشنایی با CSS Positioning

css position این امکان را به شما خواهد داد تا موقعیت یک عنصر را در چینش صفحه وب سایت انتخاب کنید .


امیر سروری ۲۴ دیدگاه CSS , اصول طراحی وب سایت چهارشنبه, ۴ام خرداد , ۱۳۹۰ 29027 بازدید

CSS position چیست؟

Positioning این امکان را به شما خواهد داد تا موقعیت یک عنصر را در چینش صفحه وب سایت انتخاب کنید . این خصوصیت به شما امکان خواهد داد یک عنصر را بر روی عناصر دیگر قرار دهید و یا تعیین کنید چه اتفاقی رخ دهد وقتی محتوای یک عنصر بسیار بزرگ باشد .
با تعیین عناصر top , right , bottom , left میتوانید موقعیت یک عنصر در صفحه را تعیین کنید . تعیین این مقادیر به تنهایی کار ساز نخواهند بود و باید نوع این تعیین موقعیت نیز مشخص شود .

تعیین موقعیت عناصر در صفحه ( CSS Positioning ) دارای چهار مقدار و روش ( static , absolute , relative , fixed ) متفاوت است که در زیر به توضیح این روشها و نحوه استفاده از آنها خواهیم پرداخت .

تعیین موقعیت ایستا ( Static )

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

css position static

چهار عنصر با نوع موقعیت static در کنار یکدیگر قرار دارند . تمامی عناصر به طور پیش فرض دارای نوع موقعیت static هستند

تعیین موقعیت ثابت ( Fixed Positioning )

یک عنصر با نوع موقعیت ثابت ( fixed ) نسبت به پنجره مرورگر تعیین موقعیت خواهد شد . این عنصر با حرکت صفحه به بالا و پایین و حتی چپ و راست ( scroll ) تغییر موقعیت نخواهد داد . نوع موقعیت ثابت عنصر را از جریان طبیعی صفحه جدا خواهد کرد و موقعیت این عنصر تاثیری در چینش و جریان طبیعی صفحه نخواهد داشت و از چینش صفحه حذف خواهد شد . یک عنصر با نوع موقعیت ثابت می تواند بر روی دیگرعناصر قرار گیرد .

    div {position:fixed;top:50px;right:50px;}

css position static

یک عنصر با نوع موقعیت fixed در کنار سه عنصر با موقعیت static یا نرمال

css position static

عنصر با نوع موقعیت fixed از جریان صفحه جدا شده است و با حرکت صفحه در جای خود ثابت باقی می ماند و جای خود را نیز در صفحه از دست داده است

تعیین موقعیت نسبی ( Relative Positioning )

یک عنصر با نوع موقعیت نسبی ( relative ) میتواند نسبت به موقعیت طبیعی خود تغییر مکان دهد و یا بر روی دیگر عناصر قرار گیرد . این عنصر از جریان طبیعی صفحه به طور کامل خارج نخواهد شد و با عناصر دیگر در صفحه در ارتباط خواهد بود . نکات مهم در این نوع تغییر موقعیت باقی ماندن فضا و تاثیر این عنصر در چینش و جریان طبیعی صفحه و همچنین تغییر موقعیت نسبت به موقعیت طبیعی است .
از عناصر با موقعیت نسبی ( relative ) به عنوان نگهدارنده و محدود کننده عناصر با نوع موقعیت ثابت ( absolute ) استفاده می شود که توضیحات بیشتری در این مورد ارائه خواهد شد.

    div {position:relative;left:-20px;bottom:30px;}

css position static

یک عنصر با نوع موقعیت relative در کنار سه عنصر با موقعیت static یا نرمال

css position static

یک عنصر با نوع موقعیت relative نسبت به مکان طبیعی خود تغییر مکان داده است و اثر خود را در صفحه حفظ کرده

css position static

با حرکت صفحه عنصر با نوع موقعیت relative از جریان طبیعی صفحه جدا نشده است

تعیین موقعیت مطلق ( Absolute Positioning )

یک عنصر با نوع موقعیت مطلق ( absolute ) از جریان طبیعی صفحه خارج خواهد شد . این عناصر نسبت به اولین عنصر بالا سری خود ( parent ) که دارای خاصیت و نوع موقعیتی غیر ازموقعیت ایستا ( static ) هستند تغییر موقعیت خواهند داد . در صورتی که هیچ کدام از عناصر بالا سری دارای نوع موقعیت متفاوت با حالت طبیعی ( ایستا ) نباشند این عناصر نسبت به عنصر html تغییر موقعیت می دهند .
عناصر با موقعیت مطلق می توانند بر روی دیگر عناصر قرار گیرند ( overlap )

    div {position:absolute;left:0px;top:0px;}

css position static

یک عنصر با نوع موقعیت absolute از جریان صفحه جدا شده است و نسبت به html تعیین موقعیت می شود

css position static

با حرکت صفحه عنصر با نوع موقعیت absolute در جای خود باقی مانده و از جریان صفحه جدا شده است . این عنصر نسبت به محدوده تگ html تعیین موقعیت شده است . تفاوت بین یک عنصر absolote و fixed در حرکت صفحه است . عنصر fixed در هنگام حرکت صفحه در جای خود باقی میماند ولی عنصر absolute از جریان صفحه به صورت کلی خارج می شود و در هنگام حرکت صفحه نیز در جای خود ثابت می ماند .

قرار گرفتن روی هم ( Overlapping Elements )

هنگامی که عناصر از حالت عادی و نوع موقعیت ایستا ) static ) خارج میشوند و مقدار متفاوتی برای آنها مشخص می شود ( fixed , relative , absolute ) این توانایی را خواهند داشت تا بر روی دیگر عناصر قرار گیرند .

    div.a {position:absolute;left:20px;top:20px;z-index:0;}
    div.b {position:absolute;left:30px;top:30px;z-index:1;}
    div.c {position:absolute;left:40px;top:40px;z-index:2;}
    div.d {position:absolute;left:50px;top:50px;z-index:3;}    

css position static

عناصر با نوع موقعیت absolute بر روی یکدیگر قرار گرفته اند و به ترتیب اولویت z-index نمایش داده میشوند

برای کنترل و نحوه قرار گیری و اولویت در قرارگیری این عناصر بر روی یکدیگر از مقدار z-index استفاده می شود . چند عنصر می توانند به صورت همزمان بر روی یکدیگر قرار گیرند و با تعیین مقدار z-index می توان اولویت در قرار گیری این عناصر را تعیین نمود . عناصر با z-index بیشتر نسبت به عناصر با مقدار z-index کمتر بالاتر قرار خواهند گرفت . این عناصر مانند چند لایه بر روی یکدیگر قرار خواهند گرفت .



نویسنده / مترجم : امیر سروری

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


۲۴ دیدگاه برای این نوشته ثبت شده است


  1. داود
    ۳۰ خرداد ۱۳۹۰

    سلام اگر لطف کنید و در آخر هر آموزش فایل پی دی اف آموزش را هم قرار دهید ممنون می شم




  2. مرتضی
    ۱۶ مرداد ۱۳۹۰

    جالب کارکردید. حتما وقت زیادی گرفته. خسته نباشید!




  3. علی
    ۷ آذر ۱۳۹۰

    خیلی ممنون
    آموزش خوبی بود




  4. saman
    ۲۰ آذر ۱۳۹۰

    بسیار آموزش خوب و مفیدی بود




  5. سويدا
    ۸ اسفند ۱۳۹۰

    مطالب خوبی گذاشتین ولی من دنبال اینم که چرا زمانی که کد div راست رو می برم بالای کد div بادی روبروی هم قرار نمی گیرند بالا و پایین می شن اگه جواب بدین ممنون می شم؟




  6. داریوش
    ۳۱ تیر ۱۳۹۱

    سلام. سایت تان بسیار زیبا و مطالب آموزشی تان، فنی و عالی است. استفاده کردم. اما یک پیشنهاد: اگر مطالب را با مثال های عملی و پرقدرت همراه کنید، سایت تان بی نظیر خواهد شد. همان طور که بیان و شیوه آموزش تان با دیگر سایت ها متفاوت است ارائه مثال هایی واقعی و کاربردی، محتوای سایت شما را از سایر سایت های مشابه ممتاز خواهد کرد. سپاس




  7. pari
    ۱۶ آبان ۱۳۹۱

    salam
    mamnoon az matalebeton
    faghat y nazar dashtam, age matalebeton ba mesal hamrah bashe vase kasi mese man k taze shoro karde va ziad etelaat nadare kheli mofidtar hast…
    ba omide movafaghiyate harche bishtar shoma




  8. alibavafa
    ۷ بهمن ۱۳۹۱

    دمت قیژ … خیلی ناز و خوشگل توضیح دادی … خدا پدرتو بیامرزه … بوووس




  9. مهدی sh
    ۶ فروردین ۱۳۹۲

    ممنون از آموزشتون
    مطلب اولویت بندی شما که با z-index مشخص میشه به من خیلی کمک کرد

    واقعاً ممنون




  10. ایمان
    ۷ خرداد ۱۳۹۲

    نظر ها دیر رسیدگی میشه که این نشون میده کمتر به این سایت میاین ولی واقعا خیف هستش ما به این جور سایت ها نیاز داریم.




  11. yasaman
    ۲۶ خرداد ۱۳۹۲

    kheili khob bood estefade kardam mamnoon




  12. عبدالغفور
    ۹ شهریور ۱۳۹۲

    واقعا چالب بود. خیلی ممنون




  13. سجاد
    ۱۷ مهر ۱۳۹۲

    بسیار عالی بود ، از زحمت شما ممنون ،بی نهایت!
    استاتیک برام سوال بود.




  14. آموزش سئو
    ۲۲ آبان ۱۳۹۲

    بسیار عالی بود




  15. علی
    ۲۷ آبان ۱۳۹۲

    واقعا کاربردیه!
    ممنون از زحمات شما




  16. سید مهدی
    ۱۳ دی ۱۳۹۲

    سلام ممنون بارها از سایت مفیدتون استفاده کردم امیدوارم همیشه موفق باشید




  17. اراد
    ۱۹ دی ۱۳۹۲

    با سلام و تشکر بابت اموزشتون
    حالا یه سوال؟؟
    اگه بخوایم یک عنصر نسبت به صفحه ثابت نباشه و تغییر مکان بده ولی نسبت به عنصری (div)که داخل اون قرار داره ثابت باشه چیکار باید بکنیم(منظورم اینه تو عناصری که داخل صفحه خاصیت اسکرول دارند قرار بدیم ونسبت به این عنصر ثابت باشه نه صفحه)؟؟




  18. دانیال
    ۲ اردیبهشت ۱۳۹۳

    با سلام و تشکر از آموزش های مفیدتون




  19. Arian
    ۳۱ اردیبهشت ۱۳۹۳

    با سلام وسپاس از زحمات شما
    یک سوال داشتم میگم میشه هر شیء رو هرجا که میخواییم نمایش بدیم؟




  20. محمد حسین
    ۱۳ تیر ۱۳۹۳

    آقا مطلب که خوب بود من فقط می خواستم یه نکته عرض کنم برای کسایی که از این سایت استفاده می کنند؛ اگه واقعا مطالب این سایت به دردتون می خوره -که می خوره- و اگه واقعا از مطالبش تو کاراتون استفاده می کنید – که می کنید-
    معرفت حکم می کنه تشکر کنیم و قدر دان باشیم
    اینا موجب دلگرمی میشه
    امیر سروری جان دمت گرم خسته نباشی




  21. محمد
    ۲۲ تیر ۱۳۹۳

    سلام وب سایت خوبی دارید و از زحماتتان سپاسگزارم




  22. مهدی
    ۴ آبان ۱۳۹۵

    سلام

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




  23. morteza
    ۲۴ آذر ۱۳۹۵

    ممنون از تلاشتان



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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2019 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.