درس ششم: موقعیت‌دهی (CSS Position) و کنترل چیدمان

به طور پیش‌فرض، تگ‌ها پشت سر هم قرار می‌گیرند. اما با ویژگی position می‌توانید هر عنصر را به هر جایی از صفحه که دوست دارید منتقل کنید. برای حرکت دادن عنصر، از چهار جهت top, bottom, left و right استفاده می‌کنیم.

📍 ۱. حالت‌های اصلی موقعیت‌دهی

📌 Relative: عنصر نسبت به جای قبلی خودش جابجا می‌شود (بدون اینکه بقیه عناصر جابجا شوند).
📌 Absolute: عنصر نسبت به اولین والد خود که پوزیشن دارد جابجا می‌شود (مانند یک لایه روی بقیه قرار می‌گیرد).
📌 Fixed: عنصر به صفحه می‌چسبد و حتی با اسکرول کردن هم جابجا نمی‌شود (مثل منوهای بالایی سایت).
📌 Sticky: ترکیبی از حالت عادی و Fixed؛ وقتی کاربر به نقطه خاصی می‌رسد، عنصر می‌چسبد.

💻 نمونه کد برای منوی چسبان (Fixed)

ببینید چطور یک نوار بالایی می‌سازیم که با اسکرول کردن در بالای صفحه باقی بماند:

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
}

층 ۲. اولویت نمایش (Z-index)

وقتی دو عنصر روی هم قرار می‌گیرند، کدام یک باید رو باشد؟ با ویژگی z-index اولویت را مشخص می‌کنیم. عدد بزرگتر، روتر قرار می‌گیرد.

.on-top {
    position: absolute;
    z-index: 10; /* این جعبه روی بقیه قرار می‌گیرد */
}

🚩 تمرین موقعیت‌دهی:

یک دکمه “تماس با ما” بسازید و با استفاده از position: fixed و مقادیر bottom: 20px و right: 20px، آن را به گوشه پایین سمت راست سایت بچسبانید.

درس قبلی

بازگشت به دوره

درس بعدی