نحوه استفاده از position در تیلویند ؟
به صورت کلی این فریم ورک به شکل کامل از پایه طراحی شده است تا بتواند به شکل فوق العاده ای قابل تنظیم و شخصی سازی باشد. در ابتدا این فریم ورک شامل تنظیمات اولیه ای است که شما به سادگی می توانید این پیکربندی پیشفرض را تغییر دهید و یا بازنویسی کنید که این کار از طریق یک فایل به نام tailwind.config.js در درون پروژه شما به سادگی امکان پذیر است. همه چیز از رنگ ها گرفته تا اندازه فونت ها ،فاصله ی فونت ها و… با استفاده از فایل تنظیمات آن و به راحتی قابل تنظیم هستند. نیازی نیست تا خیلی با اصل فریمورک کلنجار بروید تنها کافیست بفهمید که نیاز که است کدام کلاس را برای رسیدن به نتیجه دلخواه بازنویسی (override) کنید.
چه چیز هایی فرا خواهیم گرفت ؟
نحوه استفاده از position در تیلویند ؟
آشنایی با کلاس و پراپرتی های position :
| # | Class | Properties |
|---|---|---|
| 1 | static | position: static; |
| 2 | fixed | position: fixed; |
| 3 | absolute | position: absolute; |
| 4 | relative | position: relative; |
| 5 | sticky | position: sticky; |
static
به طور کلی در css همه المنت های داخل html به همین صورت هستند ، یعنی چه ؟
یعنی این که همه المنت
ها خاصیت static در خود دارند که توسط مروگر ها این کار انجام می شود .
اما در کد زیر مشاهده می
کنیم که به عنوان فرزند این والد یک کلاس absolute استفاده کرده است .
fixed
خب رفقا در کلاس دوم مشاهده میکنیم که از کلاس fixed استفاده کرده است ، همان طور که با css آشنایی
دارید ، میدانید که از طریق این پراپرتی میشد که یک المنت را به صورت فیکس در یک والد قرار داد ، حالا
این والد می تواند تگ body باشد یا تگ دیگری
برای مثال در مثال زیر مشاهده می کنیم که این کلاس را
داخل یک المنت دیگری داده است که با کلاس relative است که چند ثانیه دیگر آن را یاد می گیرم .
- بخوانید درباره : آموزش html , css
absolute
خب ، این کلاس هم صد درصد آشنایی دارید باهاش ، مواقعی استفاده میشه که بخواهیم یک المنت را به صورت فرزند قرار دهیم و در هر جایی که بخواهیم ببریم و از آن استفاده کنیم ، برای مثال می توان از این کلاس در سر تا سر صفحه خودمان جا به جا کنیم و یا یک تگ ایجاد کنیم با کلاس absolute و درون یک المنتی قرار دهیم که با کلاس relative دارد که با این حالت خاصیت والد و فرزندی ایجاد میکنیم .
relative
همان طور که در مبحث بالا از کلاس absolute استفاده کردیم و داخل یک تگ relative قرار دادیم ، اینجا هم به همین صورت استفاده می کنیم .
- بخوانید درباره : دوره آموزش tailwind,sass در وارنا
sticky
از این کلاس هم به راحتی می توان استفاده کرد ، زمانی که بخواهیم یک المنت با اسکرول خوردن جایگاهش را تغیر دهیم از این کلاس استفاده می کنیم .
مثال : عکس زیر
- بخوانید درباره : لینک صفحه اصلی position در تیلویند :
نتیجه گیری :
خب تا این جا یاد گرفتیم که از این ها می توان در جاهای خیلی زیادی استفاده کرد ، واقعا به وسیله این ها خیلی کار ما راحت می شود .
خبر ویژه
آیا شما می دونستید بعد گذراندن این دوره در کنار تیم برنامه نویسی وارنا ، می توانید استخدام رسمی شود !پس همین حالا دست به کار شود و خود را استخدام کنید .
امیدوارم این مقاله مفید واقع بوده براتون شما به راحتی می توانید از دوره تیلویند استفاده کنید و به درآمد برسید ، یا حق