آموزش CSSآموزش طراحی سایت

جلسه ۳۷ – خاصیت position در CSS

مناطق قرار گیری در CSS

منظور از ویژگی position چیست ؟ چگونه می‌توانیم از Position Absolute استفاده کنیم؟ تفاوت Position Absolute با Position Relative چیست ؟ تفاوت Sticky و Fixed چیست؟

همونطور که تو مقدمه فصل ۱۴ هم گفتیم، می‌تونیم توسط خاصیت position، رابطه عناصر باهم رو دستکاری کنیم و در کل، این روابط رو به شکلی که انتظار داریم تنظیم کنیم. قبل از هرچیزی مثال های کاربردی Shadow در CSS رو بررسی کردید؟

خاصیت position

خاصیت position، مقادیر زیر رو در بر می‌گیره.

  • relative
  • absolute
  • static
  • fixed
  • sticky

در ادامه، کاربرد هرکدوم از این مقادیر رو باهم یاد می‌گیریم.

مقدار relative

این مقدار، باعث میشه که مکان عنصر مورد نظر، به عناصر دور و اطرافش وابسته باشه و توسط خاصیت های زیر، جا به جا شه:

  • top
  • bottom
  • left
  • right

این خاصیت ها، فاصله عنصر رو از عناصر اطراف مشخص می‌کنن.

تفاوت margin-top و top

برای درک تفاوت، یه کد HTML رو، با دو کد CSS متفاوت از دوخاصیت margin-top و  top ویرایش می‌کنیم و بعد نتیجه رو باهم بررسی می‌کنیم.

کد HTML:

<div class="div1"></div>
<div class="div2"></div>

کدCSS اول:

.div1{
   background-color: lightgreen;
   width:100px;
   height:100px;
   margin-top:50px;
}

.div2{
   background-color: lightblue;
   width:100px;
   height:100px;
}

کد CSS دوم:

.div1{
   background-color: lightgreen;
   width:100px;
   height:100px;
   position: relative;
   top:50px;
}

.div2{
   background-color: lightblue;
   width:100px;
   height:100px;
}

تو هردو کد، div اول رو ۵۰ پیکسل از بالا فاصله دادیم، اما با دو دستور مختلف.

حالا به نتایج هر دو کد دقت کنین:

استفاده از margin-top در فاصله دهی

استفاده از top در فاصله دهی

هر دو div، به مقدار ۵۰ پیکسل از عنصر بالای سر (که لبه های body به حساب میاد) فاصله گرفتن. اما نتیجه اول نشون میده که div اول بدون توجه به div دوم، به حریمش وارد شده.

تو نتیجه اول چنین چیزی مشاهده نمیشه و div دوم، متناسب با div اول، ۵۰ پیکسل به پایین حرکت کرده.

پس نتیجه کلی به شکل زیر خواهد بود:

خاصیت top، عنصر رو به شکلی حرکت می‌ده که باعث جا به جایی عناصر دورش نشه، اما margin-top، عنصر رو به شکلی حرکت می‌ده که عناصر اطرافش هم جا به جا کنه.

این موضوع در مورد left، right و bottom و خاصیت های دیگه‌ی margin هم صادقه.

مقدار absolute

این مقدار، کاملا مشابه مقدار relative‌ عمل می‌کنه و مجددا می‌تونه از خاصیت های زیر برای جا به جایی بهره ببره:

  • top
  • bottom
  • right
  • left

با این تفاوت که بر خلاف مقدار relative، مکان قرارگیری اون هیچ تاثیری بر مکان قرارگیری عناصر دیگه نداره.

ساده بگم، relative زمانی که حرکت می‌کرد، عناصر اطرافش اهمیتی به حرکتش نمی‌دادن و راهو براش باز نمی‌کردن. همین باعث می‌شد عنصر relative اون ها رو زیر بگیره.

اما عنصر absolute، حرکت هم نکنه، عناصر اطرافش به حضورش اهمیتی نمی‌دن و براش جایی باز نمی‌کنن!

برای فهمه بهتر به مثال زیر توجه کنین:

کد HTML:

<div class="div1"></div>
<div class="div2"></div>

کد CSS:

.div1{
   background-color: lightgreen;
   width:100px;
   height:100px;
}

.div2{
   background-color: lightblue;
   width:100px;
   height:100px;
   position: absolute;
}

نتیجه به فرم زیر مشاهده می‌شه:

هم پوشانی عناصر در حالت absoluteتعجبی نیست که div آبی رنگ رو نمیبینیم، چون موقعیتش absolute هست و رفته زیر divسبز رنگ!

مقدار static

این مقدار، مقدار پیش فرضی هست که برای تمام عناصر وجود داره و  باعث می‌شه که مکان و رفتار عنصر موردنظر، کاملا بستگی داشته باشه به عناصر اطرافش.

به عبارتی، دستور position:static مثل اینه که به عنصر مورد نظر هیچ positionای نداده باشیم!

خب، حالا اصلا بدرد می‌خوره؟

فرض کنین تعدادی تگ p تو صفحه داشته باشیم.

<p>Paragraph</p>
<p class="normal">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

حالا میخوایم که این تگ‌ها، به شکل relative رفتار کنن. به جز یکیشون و اونم تگیه که دارای کلاس normal هست.

کافیه کد CSS رو به فرم زیر بنویسیم:

p{
   position: relative;
}

p.normal{
   position:static;
}

مقدار fixed

این مقدار، کاملا مشابه با مقدار absolute کار می‌کنه. اما یه تفاوت جالب و قابل توجه داره:

عنصر دارای مقدار fixed، در مکان خودش ثابت می‌مونه، حتی اگه صفحه رو به بالا و یا پایین اسکرول بشه!

از این مقدار، می‌شه استفاده های بسیاری کرد، به خصوص برای منو هایی که می‌خوایم همیشه در بالای صفحمون باشن و با اسکرول شدن، ناپدید نشن!

مقدار sticky

این مقدار، کاربرد مقدار fixed رو مجددا تکرار می‌کنه، با این تفاوت که عنصر دارای مقدار sticky، با اسکرول کردن صفحه در مکان خودش ثابت نمیمونه و تا بالای صفحه نمایش حرکت می‌کنه، و پس از اون مثل مقدار fixed عمل می‌کنه.

پایان ترم

سوال:

شاید هنگام گشت و گذار تو میزفا، با چنین صحنه ناگهانی‌ای آشنا شده باشین:

کوییز مقاله ۳۷

تو علم رابط کاربری، به این پنجره ها که به صورت ناگهانی باز می‌شن و معمولا حاوی معرفی خدمات، هشدار یا حتی پنل ثبت نام هستن، modal می‌گیم.

به نظرتون یک modal رو با کمک چه مقداری از خاصیت position می‌شه ساخت؟ چرا؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

 

نتیجه گیری

تو این مقاله آموزش css رایگان ، با خاصیت position‌ و مقادیر مورد پذیرش اون آشنا شدیم و کاربرد هر کدوم رو بررسی کردیم.

می‌تونیم خلاصه ی کوتاهی از کاربرد هر کدوم از مقادیر رو ذکر کنیم:

  • static: حالت پیشفرض، عنصر static کاملا طبیعی رفتار می‌کنه و بر عناصر اطرافش تاثیر می‌ذاره.
  • relative: عنصر پیشفرض در حالت سکون طبیعیه اما زمان حرکت کردن، هیچ تاثیری بر عناصر اطرافش نداره.
  • absolute: این کلا هیچ تاثیری رو هیچ عنصری نداره. چه ساکن باشه و چه در حرکت!
  • fixed: عنصر fixed یک موقعیت ثابت در صفحه داره و با اسکرول کردن هم تغییر نمی‌کنه.
  • sticky: مشابه fixed، اما با این تفاوت که در صورت قرارگیری در پایین صفحه وب، با اسکرول کردن به بالا حرکت می‌کنه و سپس جای خودش رو حفظ می‌کنه.

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

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

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر