طراحی وب: ۴- پوزیشن

پوزیشن موقعیت مکانی یک المنت را در صفحه مشخص می‌کند.

برای تعیین مکان هر المنت، می‌توان فاصله آن را از هر سمت تعیین کرد.

برای محاسبه فاصله، سه محور مختصات در نظر گرفته می‌شود.

1. مکان پیش‌فرض المنت
2. المنت پرنت
3. پنجره بروزر

پوزیشن پیش فرض – static

اگر برای المنتی پوزیشن تعیین نگردد، به صورت پیش‌فرض مقدار static در نظر گرفته می‌شود.

<main>
    <section class="red-box"></section>
    <section class="orange-box"></section>
    <section class="purple-box"></section>
</main>

main {
  width: 400px;
  height: 400px;
  background-color: beige;
}
.red-box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.orange-box {
  width: 125px;
  height: 125px;
  background-color: orange;
}
.purple-box {
  width: 150px;
  height: 150px;
  background-color: purple;
}

در فریم بالا اسکرول کنید. و به محل قرار گرفتن هر المنت دقت کنید.

---

Static With Coordinates

دادن مختصات المنت بدون تعیین پوزیشن، هیچ کاری نمی‌کند.

.orange-box {
  left:50px;        /* 50px from left */
  ...
}

---

Relative With Coordinates

تعیین پوزیشن relative بدون تعیین مختصات هیچ کاری نمی‌کند.

.orange-box {
  position: relative;        /* relative to its default position. */
  ...
}

---

Relative With Coordinates

هنگامی‌که پوزیشن relative است؛ مختصات نسبت به مکان پیش‌فرض المنت محاسبه می‌شود.

.orange-box {
  position: relative;        /* relative to its default position. */
  top: 50px;
  left:50px;
  ...
}

---

Absolute Without Coordinates

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

.orange-box {
  position: absolute;       /* relative to its parent position. */
  ...
}

---

Absolute With Coordinates

هنگامی‌که پوزیشن المنت absolute است؛ و پوزیشن پرنت آن المنت تعیین نشده باشد. مختصات آن نسبت به پنجره بروزر محاسبه می‌شود.

.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
}

---

Absolute With Coordinates

هنگامی‌که پوزیشن absolute است؛ و پوزیشن پرنت آن المنت تعیین شده باشد. مختصات آن نسبت به پرنت محاسبه می‌شود.

main {
  position: relative;        /* relative to its default position. */
  ...
}
.orange-box {
  position: absolute;        /* relative to its parent position. */
  top: 50px;
  left:50px;
  ...
}

---

Fixed Without Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ جای المنت ثابت می‌ماند و با اسکرول کردن جابجا نمی‌شود. آن را در چیدمان بقیه المنت‌ها نادیده می‌گیرد.

اگر مختصات داده نشود، المنت را در جای پیش‌فرض خودش نمایش می‌دهد.

.orange-box {
  position: fixed;       /* relative to the browser window. */
  ...
}

---

Fixed With Coordinates

هنگامی‌که پوزیشن fixed تعیین شود؛ اگر مختصات داده شود، نسبت به پنجره بروزر محاسبه می‌شود.

.orange-box {
  position: fixed;       /* relative to the browser window. */
  top: 50px;
  left:50px;
  ...
}

---

Sticky Without Coordinates

واژه sticky به معنای چسبنده است. پوزیشن sticky باعث می‌شود، هنگام اسکرول، المنت به محل مورد نظر بچسبد. ولی بدون دادن مختصات کاری نمی‌کند.

.orange-box {
  position: sticky;        /* relative to the browser window. */
  ...
}

---

Sticky With Coordinates

هنگامی‌که پوزیشن sticky باشد؛ مختصات نسبت به پنجره بروزر محاسبه می‌شود.

.orange-box {
  position: sticky;        /* relative to the browser window. */
  top: 50px;
  ...
}

---

z-index

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

.red-box {
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 3;
  ...
}

.orange-box {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
  ...
}

.purple-box {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
  ...
}

---

خلاصه

حالات گوناگون را در فریم زیر تست کنید. اسکرول کنید و نتیجه را ببینید.

---

Sticky Navigation Bar

نوار منوی چسبان یکی از کاربردهای پوزیشن است.

nav {
  position: sticky;
  top: 0px;
}

---

Auto-Hiding Menu

منوی پنهان شونده نیز یکی از کاربردهای پوزیشن است.

.item {
  position: fixed;
  top: 50px;
  left: -75px;
}

.item:hover {
  left: 0px;
}

---

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• یک صفحه با منوی ثابت کناری همانند ویدیوی زیر درست کنید.