همان طور که می‌دانید برای مشخص کردن وضعیت دقیق عنصرهای html در صفحه وب از css مورد استفاده قرار می گیرد؛ اما ممکن است در بعضی مواقع در نحوه استفاده درست از پوزیشن ها در css دچار اشتباه شوید و شما را سردرگم کند. در این مقاله قصد داریم هر کدام از ویژگی ها پوزیشن های css و کاربرد هر یک را به شما آشنا کنیم امیدواریم نظر شما عزیزان را جلب کند؛ پس با ما همراه باشید.
انواع پوزیشن یا position در css
در حالت کلی هر المانی که در صفحه‌ی وب می گذاریم باید در نظم و ترتیب مشخصی در جای خود قرار گیرند. به استفاده از ویژگی پوزیشن در CSS این امکان را به شما می دهد تا جای عناصر در موقعیت های مختلف تغییر داد و آنها را در صفحه جابه‌جا کرد.
- پوزیشن relative
- پوزیشن absolute
- پوزیشن fixed
- پوزیشن Sticky
- پوزیشن Static
در ادامه توضیحات کامل تری از این پوزیشن ها در css می پردازیم.
بررسی ویژگی ها پوزیشن در css
خاصیت position در css یکی از پرکاربردی‌ترین ویژگی‌ها در طراحی صفحات وب محسوب می شود؛ به همین دلیل برای طراحی صفحات وب یا چیدمان یکسری المان به شکلی زیبا و کاربر پسند مورد استفاده قرار می گیرد. در واقع پوزیشن یا position در css، موقعیت المان صفحه است که می‌تواند به وسیله این ویژگی تعیین کرد. مکان یک المان می‌تواند به شکل مستقل یا وابسته به والدش در صفحه مشخص شود که برای این کار می توان توسط همین ویژگی پوزیشن در css انجام گیرد.
1. پوزیشن relative در css
با استفاده از پوزیشن relative به شما اجازه می‌دهد یک المان را بدون اینکه روی المان کناریش تاثیر بگذارد مکان آن را تغییر دهید و به سمت هر کدام از جهت‌های چهارگانه جابجا کنید. در این position دو ویژگی مختصاتی خواهیم داشت یکی برای خود المان که امکان جابجایی آن را فراهم می‌کند و دیگری برای فرزندانی از المان که دارای پوزیشن absolute می باشند که این ویژگی را در ادامه بررسی خواهیم کرد. نحوه کدنویسی css این position به شکل زیر است:
.div {
Position: relative;
}
2. پوزیشن absolute در css
یکی دیگر از انواع position در css، ویژگی پوزیشن absolute است اگر المانی این ویژگی را داشته باشد می‌توان موقعیت المان را نسبت به عنصر والدش تغییر داد. بنابراین المانی که خاصیت پوزیشن absolute دارد به تگ والدش نگاه می‌کند. اگر تگ والد خاصیت position:relative داشته باشد متناسب با آن تغییر پیدا می کند. در نظر داشته باشید که اگر تگ والد آن هم پوزیشن absolute را نداشته باشد، به تگ بالاتر از خود مراجعه می‌کند. همین طور اگر این تگ هم دارای پوزیشن relative نبود به تگ های بالاتر رجوع می کند تا به یک تگ با پوزیشن relative برسد. دقت داشته باشید اگر در آخر به تگ body , html رسید و آنها هم این خاصیت را نداشتند متناسب با صفحه موقعیتش تغییر پیدا می کند. نحوه کدنویسی css این position به شکل زیر است:
.div {
Position: absolute;
}
3. پوزیشن fixed در css
این پوزیشن در css یکی از کاربردیترین خاصیت های position در css می باشد که برای ساخت هدرها و منوهای با موقعیت فیکس مورد استفاده قرار می گیرد. هدرها فیکس، هدرهایی گفته می شود، هنگامی که در صفحه‌ی وب سایتی به سمت پایین اسکرول می کنید، بخش هدر در قسمت بالای صفحه‌ی نمایش دستگاه شما به صورت ثابت قرار می گیرد. به بیانی دیگر، خاصیت fixed در css، موقعیت یک المان را متناسب با صفحه‌ی نمایش یا اصطلاحا viewport تعیین می‌کند و المان در قسمتی از صفحه‌ی نمایش به صورت ثابت باقی می‌ماند. نحوه کدنویسی css این position به شکل زیر است:
.div {
Position: fixed;
}
4. پوزیشن Sticky در css
ویژگی پوزیشن استیکی از دو پوزیشن Static و fixed استفاده می‌کند. این خاصیت المان در قسمتی از صفحه با موقعیت استاتیک قرار می گیرد و پس از اسکرول کردن صفحه، این المان به پوزیشن fixed تغییر حالت داده و در مکان خود ثابت می‌شود. برای مثال فرض کنید در صفحه مقاله یک وب سایت یکی از بخش های مقاله از پوزیشن sticky استفاده می‌کند، هنگام اسکرول کردن و رسیدن به بخش موردنظر، این بخش در قسمت بالا صفحه نمایش ثابت شده و از جای خود تکان نمی‌خورد. نحوه کدنویسی css این position به شکل زیر است:
div {
Position: sticky;
}
5. پوزیشن Static در css
آخرین مورد از خاصیت های پوزیشن در css، پوزیشن Static است. به صورت پیش فرض المان های روی یک صفحه در موقعیت استاتیک قرار دارند. با استفاده از این پوزیشن المان ها، قابل جابجایی نیستند. کاربرد این پوزیشن در css زمانی است که بخواهید یک المان را از پوزیشنی دیگر، به وضعیت اولیه‌ی خود برگرداند. از آنجایی که موقعیت Static موجب می‌شود المان را به صورت پیشفرض در جریان عادی (flow) قرار دهد و حذف یا جابجایی المان موجب تغییر حالت عناصر کناری خواهد شد. نحوه کدنویسی css این position به شکل زیر است:
div {
Position: Static;
}
سخن پایانی
تا اینجا مطلب سعی کردیم توضیحاتی در زمینه آموزش پوزیشن در css به شما ارائه دهیم.ویژگی position در css یکی از کاربردیترین خاصیت ها در css می باشد که با استفاده از آن می توانید المان های خود را در موقعیت های مختلف صفحه نمایش قرار دهید. امیدواریم مطالب برای شما سودمند واقع شده باشد؛ در صورت نیاز به آموزش های پایه ای html css می توانید دوره آموزش html5 , css 3 آکادمی آی تی را مشاهده کنید.
