0

بلاگ

آموزشگاه ابراهیمی نژاد بلاگ مقالات زبانهای برنامه نویسی وب CSS آموزش position در css

آموزش position در css

18/03/1402
ارسال شده توسط
CSS
2.53k بازدید

در CSS، خاصیت position برای تنظیم وضعیت المان‌های HTML در صفحه وب استفاده می‌شود.

این خاصیت برای کنترل موقعیت، تعامل و ترتیب المان‌ها در صفحه بسیار مفید است.

در زیر توضیحاتی درباره نحوه استفاده از خاصیت position را ارائه می‌دهم و با مثال‌هایی نحوه کارکرد آن را توضیح می‌دهم.

خاصیت position می‌تواند چهار مقدار مختلف داشته باشد:

  1. static: مقدار پیش‌فرض برای خاصیت position است. المان‌هایی که مقدار position آن‌ها static باشد،
    با ترتیب طبیعی در سند نمایش داده می‌شوند و تأثیری در موقعیت و ترتیب المان‌ها ندارند.

  2. relative: با استفاده از position: relative می‌توانید موقعیت المان را نسبت به موقعیت اصلی آن تغییر دهید.
    با تنظیم مقادیر top، right، bottom و left می‌توانید المان را به سمت بالا، راست، پایین و چپ حرکت دهید.
    به طور پیش‌فرض، مقادیر top، right، bottom و left به پیکسل هستند، اما می‌توانید از واحدهای دیگر نیز استفاده کنید.

<div class="box"></div>

<style>
.box {
position: relative;
top: 20px;
left: 30px;
}
</style>

  1. fixed: با استفاده از position: fixed می‌توانید موقعیت المان را نسبت به نوار اسکرول صفحه تغییر دهید.
    المان با استفاده از مقادیر top، right، bottom و left در مکان مشخصی نگهداری می‌شود
    و با حرکت صفحه، در همان موقعیت ثابت قرار می‌گیرد.

<div class="header">Header</div>

<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f1f1f

}
  1. absolute: با استفاده از position: absolute می‌توانید المان را نسبت به المان مرجعی مشخص کنید.
    المان با توجه به المان مرجع، موقعیت دقیقی را دارد و با تنظیم مقادیر top، right، bottom و left می‌توانید آن را در موقعیت مورد نظر قرار دهید. المان absolute بر اساس المان مرجع، از جریان سند خارج می‌شود.
<div class="container">
<div class="box"></div>
</div>
<style>.container {
position: relative;
width: 400px;
height: 300px;
background-color: #f1f1f1;
}

 

.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, –50%);
width: 100px;
height: 100px;
background-color: #ff0000;
}
</style>

در این مثال، المان .box درون المان .container قرار گرفته است.
المان .container دارای position: relative است
تا المان .box را متناسب با موقعیت خود قرار دهد.
سپس با استفاده از position: absolute و تنظیم top: 50% و left: 50% به صورت نسبی، المان .box در وسط المان .container قرار می‌گیرد.
توجه کنید که با استفاده از transform: translate(-50%, -50%)، المان .box به صورت مرکز نمایی می‌شود.

این مثال‌ها به شما توضیحاتی درباره استفاده از خاصیت position در CSS ارائه می‌دهند. با استفاده از این خاصیت و ترکیب آن با خواص و واحدهای دیگر در CSS، می‌توانید المان‌های وب خود را به صورت دقیق و انعطاف‌پذیر موقعیت‌بندی کنید.

 

 

 

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید