زنگ CSS: جلسه یازدهم - تعیین موقعیت در CSS

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

• نام: position
• این دستور چه کاری انجام می‌دهد؟‌ موقعیت المان‌ها در صفحه را مشخص می‌کند. این حالت هیچ ویژگی خاصی ندارد و حالت پیش‌فرض محسوب می‌شود و صرفا جهت آشنایی شما آورده شده است. 
• چه چیزهایی را در مقابلش بنویسیم؟ در این قسمت ما با موقعیت static سر و کار داریم. 
• نمونه نوشتن این دستور: position: static

استاتیک به صورت پیش‌فرض برای موقعیت تمام المان‌ها وجود دارد و نیازی به نوشتن آن نیست. در این حالت المان‌های شما از چهارگوشه صفحه فاصله بخصوصی ندارند و درست در جای خود قرار می‌گیرند. در این حالت شما نمی‌توانید به المانتان بگویید که چقدر به سمت چپ برود یا چقدر به سمت راست!

تمامی المان‌های دارای موقعیت استاتیک به صورت ساده و بدون فاصله از گوشه خاصی نشان داده می‌شوند

div.static {    position: static;    border:  3px solid #8AC007;}

تمامی المان‌های دارای موقعیت استاتیک به صورت ساده و بدون فاصله خاصی از گوشه‌ها نشان داده می‌شوند

در این مثال ما اگر top، bottom یا right و left بدهیم تاثیری نخواهد داشت؛ چون المان ما حالت استاتیک دارد. 

فرض کنید شما بخواهید المان خود را به مکان معین‌تری ببرید. مثلا بگویید که از سمت چپ صفحه ۲۰ پیکسل فاصله داشته باش! در این حالت می‌توانید از دستور relative برای تعیین position المان استفاده کرده و فاصله‌هایی که مد نظر دارید را برای المان مشخص کنید. مثلا شما می‌توانید به المانتان بگویید چقدر به سمت چپ یا راست یا بالا یا پایین برود. 

• نام: position
• این دستور چه کاری انجام می‌دهد؟‌ موقعیت المان‌ها در صفحه را مشخص می‌کند. شما بدین ترتیب می‌توانید المان خود را نسبت به قسمت‌های مختلف فاصله بیندازید و در جای دلخواه قرار دهید.
• چه چیزهایی را در مقابلش بنویسیم؟ در این قسمت ما با موقعیت relative سر و کار داریم. 
• نمونه نوشتن این دستور: position: relative

برای این کار در قدم اول کلمه position را می‌نویسیم و روبروی آن از ویژگی relative استفاده می‌کنیم. بدین ترتیب سی‌اس‌اس می‌فهمد که باید المان ما موقعیت بخصوصی داشته باشد.

قدم دوم: در خط بعدی فاصله‌ها را وارد می‌کنیم. چهار مقدار می‌توانیم وارد کنیم؛ فاصله از بالا (top)، فاصله از پایین(bottom)، فاصله از راست(right)، فاصله از چپ (left). برای مثال زمانی که ما در روبروی فاصله از بالا عدد ۲۰ پیکسل بنویسیم، المان ما از بالای صفحه به مقدار ۲۰ پیکسل به سمت پایین هول داده می‌شود. 

نکته: شما می‌توانید یکی از مقدارها یا حتی همه این فاصله‌ها را وارد کنید. موقعیت المان شما بر اساس فاصله‌های داده شده در صفحه تنظیم می‌شود.

یک المان ریلیتیو که موقعیت خاصی برای آن مشخص نشده است.

المان ریلیتیو دیگر که موقعیت مخصوص دارد.

.relative1 {

position: relative;

} .relative2 {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

یک المان ریلیتیو که موقعیت خاصی برای آن مشخص نشده است.

المان ریلیتیو دیگر که موقعیت مخصوص دارد.

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

اما در div سبز رنگ که با کلاسrelative 2 نوشته شده است ما به المان خود گفته‌ایم که موقعیت جدیدی بگیرد که در آن از سمت چپ ۲۰ پیکسل فاصله داشته باشد و از سمت بالا نیز منهای ۲۰ پیکسل! در این حالت المان شما به جای اینکه از بالا فاصله بگیرد و به سمت پایین هول داده شود، بر عکس عمل می‌کند. اگر هنوز با قضیه منفی وارد کردن مشکل دارید بخش پایین مخصوص شماست.

وارد کردن عدد منفی در هنگام وارد کردن موقعیت در CSS: 

در حالت عادی زمانی که شما مثلا ۲۰ پیکسل را روبروی فاصله از بالا top بنویسید سی‌اس‌اس‌ از بالاترین نقطه، ۲۰ پیکسل پایین می‌آید تا بین بالاترین سطح و المان شما ۲۰ پیکسل فاصله بیفتد. اما زمانی که شما به جای ۲۰+ عدد ۲۰- را بنویسید سی اس اس المان  شما را در جهت خلاف بالاتر می‌برد؛ یعنی به جای حرکت به سمت پایین به اندازه‌ی ۲۰ پیکسل، ۲۰ پیکسل به سمت بالا حرکت می‌کند.