آشنایی با CSS Positioning

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


امیر سروری ۲۵ دیدگاه CSS , اصول طراحی وب سایت چهارشنبه, 25th می , 2011 32505 بازدید

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. داود
    20 ژوئن 2011

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




  2. مرتضی
    7 آگوست 2011

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




  3. علی
    28 نوامبر 2011

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




  4. saman
    11 دسامبر 2011

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




  5. سويدا
    27 فوریه 2012

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




  6. داریوش
    21 جولای 2012

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




  7. pari
    6 نوامبر 2012

    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
    26 ژانویه 2013

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




  9. مهدی sh
    26 مارس 2013

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

    واقعاً ممنون




  10. ایمان
    28 می 2013

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




  11. yasaman
    16 ژوئن 2013

    kheili khob bood estefade kardam mamnoon




  12. عبدالغفور
    31 آگوست 2013

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




  13. سجاد
    9 اکتبر 2013

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




  14. آموزش سئو
    13 نوامبر 2013

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




  15. علی
    18 نوامبر 2013

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




  16. سید مهدی
    3 ژانویه 2014

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




  17. اراد
    9 ژانویه 2014

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




  18. دانیال
    22 آوریل 2014

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




  19. Arian
    21 می 2014

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




  20. محمد حسین
    4 جولای 2014

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




  21. محمد
    13 جولای 2014

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




  22. مهدی
    25 اکتبر 2016

    سلام

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




  23. morteza
    14 دسامبر 2016

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




  24. میم
    3 می 2020

    خیب بید



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





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

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

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

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

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



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

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