Bài 18: Position (relative, absolute, fixed, sticky) trong Tailwind CSS

Trong bài học này, bạn sẽ học cách kiểm soát vị trí chính xác của phần tử trong layout — từ header cố định đến popup nổi, hay một badge nhỏ nằm gọn ở góc.

Khi bạn muốn một nút luôn nằm ở góc dưới màn hình, hoặc một thanh điều hướng “dính trên đầu” khi cuộn trang — đó chính là lúc bạn cần điều khiển position.

Trong CSS truyền thống, bạn viết position: absolute; top: 0; right: 0;, hoặc position: sticky kết hợp với top: 0. Tailwind giúp bạn rút gọn điều này thành các class ngắn gọn, dễ đọc như absolute, top-0, sticky, inset-x-0…

Hôm nay, chúng ta sẽ học:

• Các loại position: relative, absolute, fixed, sticky
• Cách sử dụng top, bottom, left, right, inset-*
• Kỹ thuật đặt phần tử nổi, dính, hoặc neo chính xác theo thiết kế

---

Các class position

Class	Tác dụng tương đương CSS
static	position: static (mặc định)
relative	position: relative
absolute	position: absolute
fixed	position: fixed
sticky	position: sticky

Ví dụ:

📋 Copy<div class="relative">
  <div class="absolute top-0 right-0 bg-red-500 text-white p-1 rounded-full text-xs">
    NEW
  </div>
  <img src="..." class="w-32" />
</div>

Ở đây:

• Khối cha là relative để làm mốc định vị
• Badge absolute top-0 right-0 nằm lên góc phải phía trên

---

Điều chỉnh vị trí – top, bottom, left, right

Tailwind cung cấp các class:

Class	Ý nghĩa
top-0, top-1, top-4, top-1/2	Khoảng cách từ phía trên
left-0, right-0, bottom-0	Các cạnh khác tương tự
inset-0	top: 0; right: 0; bottom: 0; left: 0
inset-x-0	left: 0; right: 0
inset-y-0	top: 0; bottom: 0

Bạn cũng có thể dùng -top-4 để đẩy phần tử ra ngoài.

---

Ví dụ thực tế

Header cố định trên đầu trang:

📋 Copy<header class="fixed top-0 left-0 w-full bg-white shadow z-50 p-4">
  <h1 class="text-lg font-bold">Logo</h1>
</header>

Popup nằm chính giữa màn hình:

📋 Copy<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white p-6 rounded shadow-lg">
    <p>Đây là nội dung popup</p>
  </div>
</div>

Sticky header (dính khi cuộn):

📋 Copy<header class="sticky top-0 bg-white z-40 p-4 shadow">
  Menu luôn nằm trên cùng khi cuộn
</header>

---

So sánh với CSS truyền thống

Tác vụ	CSS thuần	Tailwind CSS
Đặt position: relative	position: relative	relative
Đặt một badge ở góc	position: absolute; top: 0; right: 0;	absolute top-0 right-0
Cố định header	position: fixed; top: 0;	fixed top-0
Dính khi cuộn	position: sticky; top: 0;	sticky top-0

---

Tổng kết kiến thức

Class	Chức năng
relative, absolute, fixed, sticky	Loại vị trí
top-*, left-*, inset-*	Điều chỉnh vị trí cụ thể
z-*	Xác định thứ tự chồng lớp
inset-0, inset-x-0, inset-y-0	Thiết lập nhiều cạnh cùng lúc

---

Tóm tắt bài học

• Tailwind giúp bạn định vị phần tử nhanh chóng và rõ ràng bằng position và inset-*.
• Sử dụng relative làm mốc để định vị các phần tử absolute.
• fixed và sticky rất hữu ích để tạo thanh điều hướng, popup, và hiệu ứng tương tác hiện đại.

---

Bài tiếp theo

Giờ bạn đã có thể đặt phần tử chính xác tại nơi mình muốn, nhưng còn một khái niệm nữa rất hay gặp khi làm layout: thứ tự hiển thị của phần tử trong Flex hoặc Grid.

Ở bài 19, bạn sẽ học:

• Cách dùng z-index kết hợp order trong Flex/Grid
• Sắp xếp thứ tự phần tử con
• Các mẹo đảo thứ tự layout trên mobile/desktop

---

Hẹn gặp bạn trong bài 19: Layering và thứ tự hiển thị (z-index, order) trong Tailwind CSS!