مشکل همیشگی من تو absolute relative تو position
سلام خدمت اساتید محترم سایت راکت من دانشجوی رشته طراحی وب هستم و حدود ۱ ساله fron-end کار میکنم ولی تا به الا به مشکلات زیادی تو position پیدا کردم که خودتون بهتر از من میدونید !
لطفا هر کس هر چیزی که میتونه به بهتر کار کردن با position کمک کنه بگه
سپاس
پاسخها
7
انواع position:
- static: طبق جریان قرارگیری عناصر سند واقع میشه و مقداردهی به خصوصیت های top, right, bottom, left, z-index بی تاثیر است (فضایی رو اشغال میکند).
- relative: طبق جریان قرارگیری عناصر سند واقع میشه، اما بوسیله ی خصوصیت های top, right, bottom, left, z-index نسبت به مکان اولیه ی خودش جابجا میشه (فضایی را مشابه با وقتی که static بود اشغال می کنه).
- absolute: از جریان اصلی سند خارج میشه، تاثیری در قرارگیری دیگر عناصر صفحه نداره، فضایی رو اشغال نمیکنه، و نسبت به اولین عنصر block ای نگهدارنده ی خود که position: relative/absolute/fixed; دارد، قرار می گیرد.
بوسیله ی خصوصیت های top, right, bottom, left, z-index نسبت به عنصر نگهدارنده ای که ذکر شد جابجا میشه. اگر هیچکدوم از عناصر نگهدارنده آن خصوصیت relative/absolute/fixed نداشته باشد، نسبت به خود صفحه اصلی سند (html) جابجا میشه.
به نظرم این مرجع فارسی، حاوی نکات مختلفی همراه با جزئیات هستش، بهتره پیش از همه به آن رجوع نمایید.
http://css-tricks.ir/reference/position/
سلام
اگر دنبال مطلب اموزشی برای کار کردن با position ها تو css می گردی که خوب همین رو تو گوگل سرچ کن هم به فارسی و هم به انگلیسی n تا مقاله و فیلم در موردش هست اما اینکه یه جایی اش رو مشکل داری باید ذکر کنی که مشکلت چیه تا ما بتونیم راهنمایی کنیم.
دقیقا همینطور که آقای موسوی ذکر کردند، شما سئوال تون رو خیلی کلی مطرح کردید و اینجوری نمیشه درست راهنمایی کردش.
به این موارد هم می تونید رجوع کنید که درک بهتری از خصوصیت position با مقادیر مختلف آن (از جمله absolute) دریابید.
منبع فارسی:
http://css-tricks.ir/reference/position/
منبع انگلیسی:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/cssref/pr_class_position.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position
https://css-tricks.com/almanac/properties/p/position/
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
درک درستی از این مطلب حتما لازمتون میشه اما همچنین، میتونید برای قرار دادن المان ها در هر جای صفحه به راحتی از Flexbox استفاده کنید.
@ali.bayat
خصوصیت flex امکانات فراوانی رو در خصوص طراحی و چیدمان صفحه ارائه میده. ولی فکر نمی کنم خصوصیت position:absolute رو بشه با کاربرد flex قیاس کنیم.
کاربردهای متفاوت از همی دارند.
@milad
هر دو مورد برای قرار دادن المانها در جاهای خاص مورد استفاده میگیرند. پس جفتش Positioning حساب میشه
بهتره گفت: کاربرد های متفاوتی ندارند اما در جاهای متفاوتی استفاده میشند.
خیلی راحت میشه حالت flex رو به هر تعداد المان که میخواهید بدید که این شامل container اصلی هم میشه و حتی میتونید کل صفحه رو بر مبنای اون بسازید.
حتی استفاده از تگ Position در فریمورک های جدید مثل Tailwind تا قسمت زیادی حذف شده.
سلام دوست عزیز اصلا نیاز نیست سخت بگیرید.
خوب Position که ما باهاش کار داریم دو نوعی که مصرف میشه شما لازم دارید :
1-relative (پدر)
2-absolut (فرزند)
خوب معمولا اگر بخوایم 1 المان رو به صورت خیلی اختصاصی جا به جا کنیم با این روش استفاده میشه.
و FlexBox اصلا ربطی به این موضوع نداره و یه بحث دیگه است.
فرض کنیم 1 div پدر داریم یعنی relative و بهش پوزیشن relative میدیم.
و div داخلی اش که فرزند میشه absolut رو باید پوزیشن absolut بدیم.
حالا میایم به absolut خاصیت های :
1-top
2-bottom
3-left
4-right
اصلا چیز سختی نیست به زبان فارسی میگیم اقای دایو دوم یعنی فرزند ما که absolut هستش از داخل پدرش تکون بخوره
خوب چجوری تکون بخوره میگیم از بالای پدرت فاصله بگیر باید top:10px; و همینجوری میگیم از راست پدر فاصله بگیر یا اصلا بچسب باید 0 بدیم یا میخوایم بزنه بیرون مثلا یه دایره گوشه بالا مربع باشه باید اینکارو بکنیم که بزنه بیرون مثلا راست رو منفی بدیم بزنه بیرون.
تکرار و تمرین 30 دقیقه ای برای همیشه توی ذهنتون میمونه.
امیدوارم حرفم کمکتون کنه.