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

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

خاصیت Position در CSS
خاصیت Position در CSS

منظور از ویژگی position در css چیست ؟ چگونه می‌توانیم از 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></p>
<p></p>
<p></p>
<p class="normal"></p>
<p></p>

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

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

p{
   position: relative;
}
p.normal{
   position:static;
}

مقدار fixed

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

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

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

مقدار sticky

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

پایان ترم

[box type=”info” width=””]

سوال:

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

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

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

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

19 نظر

19 پاسخ

  1. درود ممنون بابت آموزش های خوبتون . تا اینجای کار همه چی عالی توضیح داده شد اما فکر میکنم بخش position نیاز به برسی داره و باید با مثال های بهتری توضیح داده شه . (از اینکه پوزیشن absolute نسبت به جایگاه پدرش که relative داره جابه جا میشه چیزی گفته نشده)

  2. سلام یه سوال داشتم من سایتم وردپرسی هست. چند ایتم داخل صفحه دارم که میخوام موقیت یکی از ایتم ها تغییر بدم و بیارمش مثلا پایین آخرین آیتمم چطور میشه باcssاین کار و انجام داد؟

    1. سلام
      با همین position میشه و باید اموزش ببینید.
      اگرم سایت وردپرسی شما با المنتور باشه با خود المنتور هم میشه این کار کرد

  3. با سلام
    توضیحات شما رو در مورد پوزیشن relative و absolute خوندم و هیچی متوجه نشدم
    رفتم یه سرچ زدم توی نت و با سایت “ادمین سایت” آشنا شدم و خیلی خوب و واضح توضیح داده بودن
    بد نیست یه مطالعه کنین و مطلبتون رو اصلاح و یا به زبان ساده و قابل فهم بنویسین تا خواننده بتونه از مطالبتون بهره مفید تری ببره
    با تشکر

    1. سلام اسماعیل. ممنون بابت انتقادت. ما همیشه روی بهتر کردن مقالاتمون کار می‌کنیم، حتما مسئله ای که گفتی رو در نظر می‌گیریم 🙂

  4. با عرض درود و ممنون بابت پاسخ هایتان,
    من 2 تا دیو و دوتا عکس بصورت جدا از هم ساختم(کد هاشون) و با استفاده از position: relative; عکس ها رو اوردم بالا زیره دیو ها و بعدش دیسپلی عکس ها رو none کردم,
    و بعدش خواستم کاری کنم که وقتی دیوه اولی هاور شد عکسه اولی دیسپلیش block بشه و نمایش داده بشه و همین کارو واسه دیو و عکسه دومم هم کردم, ولی وقتی دیو ها هاور میشدن عکس ها نمایش داده نمیشدن
    بنظر شما مشکل چیه یا راه حل دیگه ای هم داره؟ خیلی وقته رو این مسعله ساده گیر کردم ممنون میشم پاسخ بدید ❤️

    1. سلام
      من فکر میکنم نباید تو این حالت از position ها استفاده کنی

  5. سلام
    میتونه fixed باشه ؟ چون یک موقعیت ثابت در صفحه داره و با اسکرول کردن هم تغییر نمی‌کنه.

    1. سلام حسین. دقیقا همینطوره. position: fixed یکی از دستورات خیلی مهمی هست که برای این منظور در مودال ها استفاده میکنیم.

    1. سلام فرهان. این پاسخ مورد انتظار سوال نیست ولی از یک دید دیگری پاسخت کاملا درسته. ممنون ازت ??

  6. سلام من طبق جلسه 55 یه منو افقی ساختم اما وقتی خاصیت فیکس یا استیکلی رو میدم بهش منو جمع و کوچیک میشه و استیکی هم کلا منو رو ناپدید میکنه چیکار کنم

    one
    two
    three
    four

    ul {
    position: fixed;
    list-style-type: none;
    padding-left: 0%;
    background: linear-gradient(to right, rgb(9, 9, 145), rgb(148, 18, 18));
    }

    li {
    display: inline-block;
    margin: 0 10%;
    }

    1. سلام علی. خب با این کد های کم نمیشه درست مشکل رو بررسی کرد. هم کد HTML و هم CSS رو تو یه فایل بنویس و آپلود کن تا با هم بررسی کنیم.

  7. سلام
    من الان نفهمیدم که relative جلوی یه عنصر دیگه یا abslout??

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

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

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

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=