خاصیت Position + آموزش نحوه تغییر منطقه قرارگیری اشیاء

خاصیت Position + آموزش نحوه تغییر منطقه قرارگیری اشیاء
منظور از ویژگی position چیست ؟ چگونه می‌توانیم از Position Absolute استفاده کنیم؟ تفاوت Position Absolute با Position Relative چیست ؟ تفاوت Sticky و Fixed چیست؟
همونطور که تو مقدمه فصل 14 هم گفتیم، می‌تونیم توسط خاصیت 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 اول رو 50 پیکسل از بالا فاصله دادیم، اما با دو دستور مختلف.
حالا به نتایج هر دو کد دقت کنین:






هر دو div، به مقدار 50 پیکسل از عنصر بالای سر (که لبه های body به حساب میاد) فاصله گرفتن. اما نتیجه اول نشون میده که div اول بدون توجه به div دوم، به حریمش وارد شده.
تو نتیجه اول چنین چیزی مشاهده نمیشه و div دوم، متناسب با div اول، 50 پیکسل به پایین حرکت کرده.
پس نتیجه کلی به شکل زیر خواهد بود:
خاصیت 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;

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


تعجبی نیست که 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 می‌شه ساخت؟ چرا؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن 10 هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
نتیجه گیری
تو این مقاله آموزش css رایگان ، با خاصیت position‌ و مقادیر مورد پذیرش اون آشنا شدیم و کاربرد هر کدوم رو بررسی کردیم.
می‌تونیم خلاصه ی کوتاهی از کاربرد هر کدوم از مقادیر رو ذکر کنیم:
• static: حالت پیشفرض، عنصر static کاملا طبیعی رفتار می‌کنه و بر عناصر اطرافش تاثیر می‌ذاره.
• relative: عنصر پیشفرض در حالت سکون طبیعیه اما زمان حرکت کردن، هیچ تاثیری بر عناصر اطرافش نداره.
• absolute: این کلا هیچ تاثیری رو هیچ عنصری نداره. چه ساکن باشه و چه در حرکت!
• fixed: عنصر fixed یک موقعیت ثابت در صفحه داره و با اسکرول کردن هم تغییر نمی‌کنه.
• sticky: مشابه fixed، اما با این تفاوت که در صورت قرارگیری در پایین صفحه وب، با اسکرول کردن به بالا حرکت می‌کنه و سپس جای خودش رو حفظ می‌کنه.
امیدوارم از این مقاله لذت کافی رو برده باشین ??
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی‌