شیوا توکل
شیوا توکل
خواندن ۱ دقیقه·۵ سال پیش

مروری برصفت position در css


در این پست بسیار کوتاه میخوام توضیحی درمورد چهار پوزیشن مهم و پراستفاده درcss بدم.

static , relative , fixed , absolute

1.static

پوزیشن دیفالت برای هر المنت static است .
هر المنت با پوزیشن static در جایی که انتظارش داریم قرار میگیرد یعنی جایی که برای آن در HTML مشخص کرده ایم و مکان اولیه آن عوض نمیشود یعنی صفات left ,top ,bottom و right تاثیری روی المنت مورد نظر ندارد.

2.relative

یک المنت با پوزیشن relative میتواند نسبت به مکان اولیه اش جا به جا شود . صفات top ,left و ... میتوانند المنت را نسبت به مکان اولیه اش جا به جا کنند ولی مکان اولیه آن توسط المنت های دیگر پر نخواهد شد ،یعنی باوجود تغییر مکان هنوز هم مکان اولیه اش اشغال شده حساب میشود.

3.fixed

یک المنت با پوزیشن fixed نسبت به صفحه نمایش جابه جا میشود . صفات left ,right و ... آن را در صفحه جابه‌جا میکند ولی برخلاف relative مکان اولیه اش اشغال نمشود و میتواند با المنت های دیگر پر شود.

4.absolute

یک المنت با پوزیشن absolute نسبت به نزدیکترین المنت پدر خود جابه‌جا میشود و اگر المنت پدر نداشت نسبت به body جابه‌جا میشود .

**نکته : اگر میخواهید متنی را در تصویری قرار دهید به تصویر مورد نظر پوزیشن relative و به متن خود پوزیشن absolute بدهید.

همچنین این لینک میتونه در یادگیری چگونگی استفاده از پوزیشن مناسب باشه.

اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.
شیواتوکل | 14اسفند 98

csshtmlpositionabsoluterelative
Front-End Developer
شاید از این پست‌ها خوشتان بیاید