دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » Position ( تعیین موقعیت عناصر ) و خاصیت Z-index در فیلم آموزش CSS
Position ( تعیین موقعیت عناصر ) و خاصیت Z-index در فیلم آموزش CSS

Position ( تعیین موقعیت عناصر ) و خاصیت Z-index در فیلم آموزش CSS

در این قسمت از فیلم آموزش CSS اول خاصیت Position آموزش داده شده است و سپس خاصیت یا ویژگی Z-index و در نهایت ویژگی Overflow آموزش داده شده است ، مباحثی که در فیلم آموزشی گفته شده است را از دست ندید چون خیلی مهمه پس حتما فیلم رو ببینید .

خاصیت Position در CSS :

position این امکان را به ما می دهد تا موقعیت عناصر را در صفحه معین کنیم یا به بیانی دیگر اگر بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم باید از این خاصیت استفاده کنیم .

Position به تنهایی کار خاصی را انجام نمی دهد و به همراه خاصیت های left , right , bottom , top می آید .

position این مقادیر را می پذیرد :  Static  , Relative , absolute  , Fixed

مقدار Static :

این مقدار همان مقدار پیش فرض است و تاثیری بر روی عناصر ندارد و اگر از این مقدار برای position استفاده کنید شما نمی توانید از خاصیت های  left , right , bottom , top استفاده کنید .

سورس کد html :

سورس کد CSS :

مقدار Relative :

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

کد HTML :

کد CSS :

مقدار absolute :

این مقدار در خاصیت position به ما این امکان را می دهد که موقعیت عنصر مد نظرمان را در هر نقطه از صفحه که خواستیم تعیین کنیم و نکته ای وجود دارد این است که این مقدار وابسته به عنصر پدر نیست .

کد CSS :

مقدار Fixed :

اگر از این مقدار در Position استفاده کنید عنصر مورد نظر شما در همان نقطه ای که بهش مختصات داده اید باقی می ماند حتی اگر اسکرول کنید . این مقدار برای زمانی کاربرد دارد که بخواهید یک عکس یا بنری به صورت ثابت در یک نقطه از صفحه باقی بماند .

خاصیت Z-index در CSS :

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

خاصیت Z-index

خاصیت Z-index

هر چقدر مقدار z-index یک عنصر بیشتر باشد آن عنصر نسبت به بقیه عنصر ها روتر (اول نمایش داده می شود) است و این خاصیت می تواند مقدار مثبت یا منفی را بپذیرد .

نکته : باید به این نکته هم توجه کنید که زمانی می توانید از این خاصیت استفاده کنید که به عناصر مورد نظرتان خاصیت Position داده باشید .

کد HTML :

کد CSS :

اگر کد بالا را اجرا کنید خواهید دید که باکسی که رنگ سبز داره رو اول نشون میده چرا ؟؟؟؟؟؟؟ چون مقدار z-index اون بیشتره و اگر حالا به دومی مقدار بیشتری بدهید مثلاً مقدار 10 را باکس آبی رنگ اول نمایش داده خواهد شد .

خاصیت Overflow در CSS :

اگر باکسی داردید که یه عکس یا متن در آن قرار داده اید و متن از باکس زده بیرون برای کنترل متن اضافی از overflow استفاده می کنیم و خاصیت overflow دارای مقادیر زیر است :

hidden : با استفاده از این مقدار محتوایی که از باکس به بیرئن زده را پنهان می کنیم .

visible : با استفاده از این مقدار محتوایی که از باکس به بیرون زده را نشان می دهید .

scroll : با این مقدار اسکرول عمودی و افقی در باکس ایجاد میشه و همه محتوا را می توان با اسکرول کردن دید .

auto : این بهترین گزینه برای overflow است چون اگر باکس به اسکرول نیاز داشت به صورت خودکار این کار انجام میشه .

 

فیلم آموزش Position و خاصیت Z-index را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :


  1. شیما گفت:

    خیلی ممنون مفید بود

جواب سوال چیه ؟ *