آموزش کامل CSS – قسمت 12: موقعیت المان ها 2

همان طوری در جلسه قبل آموزش گفتیم position چهار حالت دارد که با دو حالت آن آشنا شدیم.

المان ها فیکس شده

حتما تا به حال در بعضی از سایت ها دیده اید که با اسکرول کردن صفحه دکمه یا منو یا هر المان دیگری در صفحه ثابت باقی می ماند و یا اصطلاحا فیکس می شود.

برای استفاده از این حالت خاصیت fixed را در مقابل position قرار می دهیم و سپس مقادیر راست، چپ، بالا و پایین را مشخص می کنیم. از این حالت می توانیم برای تبلیغات، چت آنلاین و موارد دیگر استفاده کنیم.

<div class=fixed”> <p>المان فیکس شده</p> </div>

div.fixed {
    position: fixed;
    bottom:  0;
     right:  0;
     width:  300px;
     border:  3px solid #8AC007;
}

حالت بعدی absolute نام دارد

موقعیت قطعی زمانی است که شما می‌گویید این المان باید در این نقطه قرار بگیرد. در این حالت المان شما نسبت به المان مادر خود که موقعیت relative دارد، موقعیتش را تنظیم می‌کند. اگر هیچ المان مادری با موقعیت relative وجود نداشته باشد، این المان خود را نسبت به body یا همان کل صفحه تنظیم می‌کند.

برای استفاده از این حالت یک المان مادر ایجاد می‌کنیم که دارای موقعیت relative باشد. بدین ترتیب المان ما می‌تواند نسبت به این المان فاصله‌‌ای دلخواه بگیرد. سپس یک المان دیگر ایجاد می‌کنیم که موقعیتش به صورت absolute باشد. این المان موقعیت خود را از سمت راست، چپ، بالا یا پایین بر اساس المانی که دارای موقعیت relative بود تنظیم می‌کند.

<div class=”relative”> <p>المان مادر که دارای موقعیت رلتیو است</p>

<div class=”absolute”> <p>المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود </p>

</div> </div>

div.relative {
    position: relative;
    width:  400px;
     height:  200px;
     border:  3px solid #8AC007;
} 

div.absolute  {
    position:  absolute;
     top:  80px;
     right:  0;
     width:  200px;
     height:  100px;
     border: 3px solid #8AC007;
}