مهدی وجودی
6 سال پیش توسط مهدی وجودی مطرح شد
7 پاسخ

مشکل همیشگی من تو absolute relative تو position

سلام خدمت اساتید محترم سایت راکت من دانشجوی رشته طراحی وب هستم و حدود ۱ ساله fron-end کار میکنم ولی تا به الا به مشکلات زیادی تو position پیدا کردم که خودتون بهتر از من میدونید !
لطفا هر کس هر چیزی که میتونه به بهتر کار کردن با position کمک کنه بگه
سپاس


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش آپدیت شد
1

انواع 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/


سید محمد حسین موسوی
تخصص : FullStack Developer
@SeyedMH.Mosavi 6 سال پیش مطرح شد
1

سلام
اگر دنبال مطلب اموزشی برای کار کردن با position ها تو css می گردی که خوب همین رو تو گوگل سرچ کن هم به فارسی و هم به انگلیسی n تا مقاله و فیلم در موردش هست اما اینکه یه جایی اش رو مشکل داری باید ذکر کنی که مشکلت چیه تا ما بتونیم راهنمایی کنیم.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش آپدیت شد
1

دقیقا همینطور که آقای موسوی ذکر کردند، شما سئوال تون رو خیلی کلی مطرح کردید و اینجوری نمیشه درست راهنمایی کردش.
به این موارد هم می تونید رجوع کنید که درک بهتری از خصوصیت 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/


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش آپدیت شد
1

انواع 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/


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
1

درک درستی از این مطلب حتما لازمتون میشه اما همچنین، میتونید برای قرار دادن المان ها در هر جای صفحه به راحتی از Flexbox استفاده کنید.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

@ali.bayat
خصوصیت flex امکانات فراوانی رو در خصوص طراحی و چیدمان صفحه ارائه میده. ولی فکر نمی کنم خصوصیت position:absolute رو بشه با کاربرد flex قیاس کنیم.
کاربردهای متفاوت از همی دارند.


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
0

@milad
هر دو مورد برای قرار دادن المان‌ها در جاهای خاص مورد استفاده میگیرند. پس جفتش Positioning حساب میشه
بهتره گفت: کاربرد های متفاوتی ندارند اما در جاهای متفاوتی استفاده میشند.

خیلی راحت میشه حالت flex رو به هر تعداد المان که می‌خواهید بدید که این شامل container اصلی هم میشه و حتی میتونید کل صفحه رو بر مبنای اون بسازید.
حتی استفاده از تگ Position در فریم‌ورک های جدید مثل Tailwind تا قسمت زیادی حذف شده.


ایلیا فرامرزپور
تخصص : FullStack Developer
@iliafaramarzpour 5 سال پیش مطرح شد
1

سلام دوست عزیز اصلا نیاز نیست سخت بگیرید.

خوب 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 دقیقه ای برای همیشه توی ذهنتون میمونه.

امیدوارم حرفم کمکتون کنه.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام