را position ویژگی در CSS مانند یک عصای جادوگر است که به شما امکان می دهد قرار دادن یک عنصر را در یک صفحه وب کنترل کنید. این به شما امکان می دهد تصمیم بگیرید که یک عنصر چگونه باید در رابطه با خواهر و برادر خود و والد حاوی آن رفتار کند. با position ویژگی، می‌توانید عناصر را به صورت شناور، چسبیده یا بزرگ‌نمایی در صفحه نمایش دهید. این یک ابزار قدرتمند در زرادخانه CSS شما است، بنابراین بیایید در آن شیرجه بزنیم و امکانات مسحور کننده آن را کشف کنیم!
نحو و کاربرد
نحو برای position دارایی نسبتاً ساده است. شما آن را با تعیین مقدار موقعیت یابی مورد نظر بر روی یک عنصر اعمال می کنید. در اینجا مثالی از نحوه ظاهر آن در کد آورده شده است:
1 |
.element { |
2 |
position: value; |
3 |
}
|
به طور پیش فرض، position دارایی تنظیم شده است static. این بدان معنی است که عنصر مطابق با جریان عادی سند قرار می گیرد. تکان نمی خورد مگر اینکه یک ضربه ملایم با مقدار موقعیت یابی دیگر به آن بدهید. به خاطر داشته باشید که position ویژگی برای عناصر درون خطی در سطح بلوک و موقعیت اعمال می شود.
را position ویژگی ارثی نیست، بنابراین باید آن را برای هر عنصر جداگانه مشخص کنید. با این حال، خواص دیگر مانند top، right، bottom، و left زمانی که ویژگی position روی آن تنظیم شده باشد، می تواند مقادیر را به ارث ببرد relative، absolute، یا fixed.
وقتی نوبت به انیمیشن‌های CSS می‌رسد، در واقع می‌توانید آنها را روی عناصر با استفاده از آن اعمال کنید position ویژگی. انیمیشن ها می توانند جادوی بیشتری به طرح های شما بیافزایند و آنها را زنده کرده و مخاطبان شما را مجذوب خود کنند. پس ادامه دهید و اجازه دهید خلاقیت شما بدرخشد!
تعیین موقعیت کلمات کلیدی
حالا بیایید کلمات کلیدی موقعیت یابی مختلف را بررسی کنیم و قدرت های عرفانی آنها را کشف کنیم!
نسبت فامیلی
را relative ارزش مانند یک ضربه ملایم برای عنصر شما است. این عنصر را از موقعیت عادی خود حرکت می دهد در حالی که فضایی برای آن در جریان سند باقی می گذارد. این به شما اجازه می دهد تا با استفاده از top، right، bottom، و left خواص به این قطعه کد نگاهی بیندازید تا آن را در عمل ببینید:
1 |
.element { |
2 |
position: relative; |
3 |
top: 20px; |
4 |
left: 10px; |
5 |
}
|
مطلق
را absolute ارزش به عنصر شما آزادی پرسه زدن را می دهد، بدون توجه به خواهر و برادر و والدینش. در صورتی که جد موقعیت‌یافته‌ای یافت نشود، عنصر را نسبت به نزدیک‌ترین جد موقعیت‌یافته خود یا بلوک حاوی اولیه قرار می‌دهد. استفاده کنید top، right، bottom، و left خواص برای هدایت مسیر آن. در اینجا یک مثال است:
1 |
.element { |
2 |
position: absolute; |
3 |
top: 50%; |
4 |
left: 50%; |
5 |
transform: translate(-50%, -50%); |
6 |
}
|
درست شد
با fixed ارزش، عنصر شما تبدیل به یک لنگر غیرقابل حرکت می شود، بدون توجه به پیمایش، همیشه در همان موقعیت قرار می گیرد. این مانند یک فانوس دریایی است که کاربران شما را در اقیانوس وسیع محتوا راهنمایی می کند. می توانید استفاده کنید top، right، bottom، و left خواص برای تنظیم مختصات آن. به قطعه کد زیر توجه کنید:
1 |
.element { |
2 |
position: fixed; |
3 |
top: 0; |
4 |
right: 0; |
5 |
}
|
چسبنده
را sticky ارزش ترکیبی از بهترین های هر دو جهان است. این مانند یک چسب جادویی است که عنصر شما را به یک موقعیت خاص می چسباند تا زمانی که به آستانه مشخصی برسد. پس از عبور از آستانه، مانند a رفتار می کند relative عنصر را top، right، bottom، و left خواص در اینجا مفید است. قطعه زیر را بررسی کنید:
1 |
.element { |
2 |
position: sticky; |
3 |
|
4 |
|
5 |
top: 20px; |
6 |
}
|
بیشتر بدانید
آیا می دانستید که position دارایی می تواند با z-index خاصیت ایجاد یک افکت لایه بندی جادویی؟ با تنظیم z-index مقدار، می توانید ترتیب انباشتن عناصر با موقعیت های مختلف را کنترل کنید. این مانند هماهنگ کردن یک سمفونی از لایه ها است که به طرح های شما عمق و بُعد می بخشد.
”
positionمالکیت یک متحد قدرتمند در هنر طراحی وب است. هنگامی که عاقلانه استفاده شود، می‌تواند یک چیدمان را از معمولی به مسحورکننده تبدیل کند و کاربران را با قرارگیری و حرکت هوشمندانه خود مجذوب خود کند.» – هری رابرتز
شما می توانید بیشتر از افکار روشنگر هری در مورد CSS را در مقاله او بیابید جادوی CSS.
آموزش های مربوطه
برای تقویت بیشتر درک خود از position اموال، در اینجا پنج آموزش وجود دارد که به رازهای آن می پردازد:
- راهنمای کامل برای موقعیت یابی CSS
مشخصات رسمی و سازگاری مرورگر
اکنون که اسرار آن را باز کرده اید position اموال، پیش بروید و قدرت آن را عاقلانه به کار بگیرید. اجازه دهید خلاقیت شما افزایش یابد زیرا عناصر را با ظرافت قرار می دهید و طرح های خود را زنده می کنید!
