منظور از ویژگی 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 اول رو ۵۰ پیکسل از بالا فاصله دادیم، اما با دو دستور مختلف.
حالا به نتایج هر دو کد دقت کنین:
هر دو 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; }
نتیجه به فرم زیر مشاهده میشه:
تعجبی نیست که 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 لذت کافی رو برده باشین 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
19 پاسخ
درود ممنون بابت آموزش های خوبتون . تا اینجای کار همه چی عالی توضیح داده شد اما فکر میکنم بخش position نیاز به برسی داره و باید با مثال های بهتری توضیح داده شه . (از اینکه پوزیشن absolute نسبت به جایگاه پدرش که relative داره جابه جا میشه چیزی گفته نشده)
سلام تشکر از حضور شما
سلام یه سوال داشتم من سایتم وردپرسی هست. چند ایتم داخل صفحه دارم که میخوام موقیت یکی از ایتم ها تغییر بدم و بیارمش مثلا پایین آخرین آیتمم چطور میشه باcssاین کار و انجام داد؟
سلام
با همین position میشه و باید اموزش ببینید.
اگرم سایت وردپرسی شما با المنتور باشه با خود المنتور هم میشه این کار کرد
با سلام
توضیحات شما رو در مورد پوزیشن relative و absolute خوندم و هیچی متوجه نشدم
رفتم یه سرچ زدم توی نت و با سایت “ادمین سایت” آشنا شدم و خیلی خوب و واضح توضیح داده بودن
بد نیست یه مطالعه کنین و مطلبتون رو اصلاح و یا به زبان ساده و قابل فهم بنویسین تا خواننده بتونه از مطالبتون بهره مفید تری ببره
با تشکر
سلام اسماعیل. ممنون بابت انتقادت. ما همیشه روی بهتر کردن مقالاتمون کار میکنیم، حتما مسئله ای که گفتی رو در نظر میگیریم 🙂
مرسی که پیگیر هستین
با عرض درود و ممنون بابت پاسخ هایتان,
من 2 تا دیو و دوتا عکس بصورت جدا از هم ساختم(کد هاشون) و با استفاده از position: relative; عکس ها رو اوردم بالا زیره دیو ها و بعدش دیسپلی عکس ها رو none کردم,
و بعدش خواستم کاری کنم که وقتی دیوه اولی هاور شد عکسه اولی دیسپلیش block بشه و نمایش داده بشه و همین کارو واسه دیو و عکسه دومم هم کردم, ولی وقتی دیو ها هاور میشدن عکس ها نمایش داده نمیشدن
بنظر شما مشکل چیه یا راه حل دیگه ای هم داره؟ خیلی وقته رو این مسعله ساده گیر کردم ممنون میشم پاسخ بدید ❤️
سلام
من فکر میکنم نباید تو این حالت از position ها استفاده کنی
سلام
میتونه fixed باشه ؟ چون یک موقعیت ثابت در صفحه داره و با اسکرول کردن هم تغییر نمیکنه.
سلام حسین. دقیقا همینطوره. position: fixed یکی از دستورات خیلی مهمی هست که برای این منظور در مودال ها استفاده میکنیم.
جواب سوال
با استفاده از position:sticky
سلام فرهان. این پاسخ مورد انتظار سوال نیست ولی از یک دید دیگری پاسخت کاملا درسته. ممنون ازت 🌹😃
سلام من طبق جلسه 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%;
}
سلام علی. خب با این کد های کم نمیشه درست مشکل رو بررسی کرد. هم کد HTML و هم CSS رو تو یه فایل بنویس و آپلود کن تا با هم بررسی کنیم.
سلام
من الان نفهمیدم که relative جلوی یه عنصر دیگه یا abslout??
سلام مهدی.
سوالت گنگ هست واضح بپرس
absolute، عناصر اطرافش به حضورش اهمیتی نمیدن و براش جایی باز نمیکنن!
دقیقا همینطوره. مرسی مهدی 🙂