CSS یکی از اصلی‌ترین زبان‌ها در توسعه وب است که به طراحان و توسعه‌دهندگان وب اجازه می‌دهد تا ظاهر و پوزیشن المان‌های HTML را بر روی صفحه نمایش کنترل کنند. موقعیت‌دهی در CSS از اهمیت بسیاری برخوردار است زیرا شما را قادر می‌سازد تا المان‌های وب را به صورت دلخواه در صفحه بچینید و ظاهری دل‌چسب برای وب‌سایت‌ها و برنامه‌های وب خود ایجاد کنید. در این مقاله، به مفاهیم و تکنیک‌های position در CSS می‌پردازیم و نحوه استفاده از آن‌ها را به تفصیل بررسی خواهیم کرد. همچنین توصیه می‌کنیم آموزش Mobile First Design را نیز مطالعه نمایید.
مقدمه به position در CSS
position در CSS به معنای تعیین مکان و موقعیت المان‌های HTML در صفحه وب است. این عمل به طراحان و توسعه‌دهندگان وب این امکان را می‌دهد تا المان‌ها را در یک صفحه به دقت جایگذاری کنند. موقعیت‌دهی یکی از اصلی‌ترین وظایف CSS در طراحی وب می‌باشد و از اهمیت بسیاری برخوردار است.
موقعیت‌دهی نسبی (Relative Positioning)
یکی از روش‌های اصلی موقعیت‌دهی در CSS موقعیت‌دهی نسبی است. در این روش، المان‌ها نسبت به موقعیت خود در حالت عادی جایگذاری می‌شوند. برای موقعیت‌دهی نسبی از ویژگی position: relative; استفاده می‌شود.
HTML:
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
CSS:
* {
box-sizing: border-box;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
در مثال بالا، المان با شناسه “two” درون المان با استفاده از position: relative; و ویژگی‌های top و left نسبت به مکان اصلی خود جابجا می‌گردد.خروجی کد بالا به صورت زیر است:
موقعیت‌دهی مطلق (Absolute Positioning)
موقعیت‌دهی مطلق یکی دیگر از تکنیک‌های موقعیت‌دهی در CSS است. در این روش، المان‌ها مکان دقیق خود را نسبت به المان والد (ancestor) خود می‌یابند. برای موقعیت‌دهی مطلق از ویژگی position: absolute; استفاده می‌شود.
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Absolute positioning</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
<p class="positioned">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
در مثال بالا، المان با کلاس”positioned” با استفاده از position: absolute; و ویژگی‌های top و left موقعیت دقیق خود را پیدا می‌کند. خروجی کد به صورت زیر است(مستطیل زرد رنگ):
موقعیت‌دهی ثابت (Fixed Positioning)
موقعیت‌دهی ثابت به عنوان یک شکل خاص از موقعیت‌دهی مطلق تلقی می‌شود. در این روش، المان‌ها به مکان خاصی روی صفحه نمایش می‌آیند و با حرکت صفحه نمایش جابجا نمی‌شوند. برای موقعیت‌دهی ثابت از ویژگی position: fixed; استفاده می‌شود.
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 80px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
در این مثال، المان با شناسه “one” به مکانی روی صفحه نمایش (80 پیکسل از بالا و 10 پیکسل از چپ) می‌آید و با حرکت صفحه نمایش نسبت به این مکان تغییر نمی‌کند. خروجی به صورت زیر می‌باشد:
موقعیت‌دهی توصیفی (Sticky Positioning)
موقعیت‌دهی توصیفی ترکیبی از موقعیت‌دهی relative و fixed است.با استفاده از موقعیت‌دهی توصیفی (sticky positioning)، ابتدا المان به صورت relative بوده تا زمانی که کاربر اسکرول کند. در آن زمان المان در نقطه خاص ثابت می‌ماند.
HTML:
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
CSS:
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
در این مثال، المان با کلاس “sticky” به موقعیتی 0 پیکسل از بالا ثابت بوده و در حین اسکرول به این نقطه متمایل می‌شود.
نکات مهم در موقعیت‌دهی با CSS
برای داشتن طراحی بهینه و خوانا، باید موارد زیر را در نظر داشت:
- استفاده از واحد‌های مناسب: برای تعیین موقعیت المان‌ها از واحد‌های مناسب مانند پیکسل، درصد، em و rem استفاده کنید.
- استفاده از موقعیت‌دهی نسبی به جای موقعیت‌دهی مطلق: از موقعیت‌دهی نسبی برای طراحی‌های ساده و موقعیت‌دهی مطلق برای طراحی های پیچیده استفاده کنید. موقعیت‌دهی مطلق معمولاً برای المان‌هایی مناسب است که باید دقیقاً در یک نقطه خاص در صفحه نمایش قرار بگیرند.
- تعیین موقعیت نسبت به المان والد: وقتی از موقعیت‌دهی مطلق استفاده می‌کنید، از ویژگی‌های
top،right،bottomوleftبرای تعیین موقعیت المان‌ها نسبت به المان والد خود استفاده کنید. - استفاده از موقعیت‌دهی توصیفی برای المان‌های چسبیده: اگر می‌خواهید یک المان را به مکانی خاص در صفحه بچسبانید، از موقعیت‌دهی توصیفی یا موقعیت‌دهی چسبیده استفاده کنید.
- استفاده از موقعیت‌دهی نسبی برای ریسپانسیو دیزاین: در طراحی ریسپانسیو، موقعیت‌دهی نسبی به شما امکان می‌دهد تا المان‌ها را به صورت نسبتی و نسبت به مکان اصلی خود بچینید و به راحتی تطبیق دهید.
- تست و اعتبارسنجی: همیشه طراحی خود را در مرورگرهای مختلف تست کرده و اطمینان حاصل کنید که صحیح نمایش داده می‌شود.
- حفظ کارایی و بهینه‌سازی: در طراحی موقعیت‌دهی به بهینه‌سازی تصاویر و منابع وب خود توجه کنید تا سرعت بارگذاری صفحه را افزایش دهید.
جمع‌بندی
position در CSS ابزاری قدرتمند برای طراحان و توسعه‌دهندگان وب است که به آن‌ها امکان می‌دهد تا المان‌ها را به دقت در صفحه نمایش بچینند. از تکنیک‌های موقعیت‌دهی نسبی، مطلق، ثابت، توصیفی و چسبانده برای موقعیت‌دهی المان‌ها استفاده می‌شود و هر یک از این تکنیک‌ها موارد مختلفی را پوشش می‌دهند.
برای داشتن یک طراحی بهینه و خوانا، مهم است که مفاهیم موقعیت‌دهی در CSS را به خوبی درک کنید و از تکنیک‌های مناسب برای هر موقعیت استفاده کنید. همچنین، تست و اعتبارسنجی در مرورگرهای مختلف از اهمیت بسیاری برخوردار است تا اطمینان حاصل کنید که طراحی شما به درستی نمایش داده می‌شود.
به عنوان یک طراح یا توسعه‌دهنده وب، آموختن مفاهیم موقعیت‌دهی در CSS و تمرین مداوم با آن‌ها می‌تواند به بهبود مهارت‌های شما کمک کند. همچنین، استفاده از منابع آموزشی و پروژه‌های عملی به شما این امکان را می‌دهد تا مهارت‌های خود را تقویت کنید و به طراحی‌های خلاقانه‌تری دست یابید.
موقعیت‌دهی در CSS یکی از جذاب‌ترین ویژگی‌های این زبان است و با تمرین و تسلط بر آن، شما قادر خواهید بود طراحی‌های وب مطلوبی ایجاد کنید. امیدوارم این مقاله به شما در درک بهتر مفاهیم موقعیت‌دهی در CSS کمک کرده باشد
