Bài 19: Layering và thứ tự hiển thị (z-index, order) trong Tailwind CSS

Tiếp tục với bài 19, bài học cuối cùng trước khi thực hành lớn trong Phần 2. Đây là lúc bạn học cách kiểm soát thứ tự hiển thị — yếu tố rất quan trọng khi bố cục có nhiều lớp hoặc muốn thay đổi thứ tự phần tử trên các thiết bị khác nhau.

Trong thiết kế giao diện, có những lúc bạn cần lớp này nằm trên lớp kia, hoặc cần một phần tử di chuyển lên xuống trong thứ tự bố cục — ví dụ như:

• Một modal xuất hiện đè lên nội dung trang
• Nút “scroll to top” luôn ở trên cùng
• Các phần tử con trong Flex đổi vị trí trên mobile

Đây là nơi mà z-index và order phát huy tác dụng.

Tailwind CSS cung cấp class để xử lý hai yếu tố này một cách gọn gàng và dễ hiểu:

• z-* để điều khiển lớp chồng
• order-* để đổi thứ tự phần tử trong Flex/Grid

---

Layering với z-index – lớp chồng

Các class phổ biến:

Class	Tác dụng tương đương CSS
z-0	z-index: 0
z-10	z-index: 10
z-20, z-30, z-40, z-50	Độ ưu tiên tăng dần
z-auto	z-index: auto (mặc định)

Ví dụ: popup nằm trên cùng

📋 Copy<div class="fixed inset-0 bg-black bg-opacity-50 z-40">
  <!-- overlay -->
</div>

<div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-white p-6 rounded shadow">
  <!-- nội dung chính của popup -->
</div>

Ở đây:

• z-40 là lớp nền mờ (overlay)
• z-50 là nội dung popup nằm đè lên

---

Thay đổi thứ tự trong Flex/Grid với order-*

Tailwind cung cấp các class order-{số}, từ order-1 đến order-12, và cả order-first, order-last.

Class	Ý nghĩa
order-1	Đặt phần tử ở vị trí 1
order-2	Đặt phần tử ở vị trí 2
order-first	Đặt phần tử lên đầu (ưu tiên nhất)
order-last	Đặt phần tử cuối cùng

Ví dụ:

📋 Copy<div class="flex space-x-4">
  <div class="order-2 bg-blue-200 p-4">Thứ 2</div>
  <div class="order-1 bg-blue-400 p-4">Thứ 1</div>
</div>

Responsive order

Bạn có thể dùng order theo breakpoint:

📋 Copy<div class="flex flex-col md:flex-row">
  <div class="order-2 md:order-1">Ảnh minh họa</div>
  <div class="order-1 md:order-2">Nội dung chính</div>
</div>

Tình huống thực tế: Trên mobile bạn muốn ảnh dưới, nhưng trên desktop ảnh lại nằm bên trái. Dùng order-* bạn không cần viết JavaScript hay thay đổi HTML.

---

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

Tác vụ	CSS thuần	Tailwind CSS
Layer modal trên cùng	z-index: 999	z-50
Sắp xếp lại Flex item	order: 2	order-2
Ưu tiên item lên đầu	order: -1 (hoặc 0)	order-first
Responsive order	Viết media query	md:order-2

---

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

Class	Tác dụng
z-0, z-10, z-50	Điều chỉnh thứ tự hiển thị lớp
z-auto	Lớp mặc định theo luồng HTML
order-1 đến order-12	Sắp xếp phần tử trong Flex/Grid
order-first, order-last	Di chuyển phần tử lên đầu/cuối

---

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

• Tailwind giúp bạn kiểm soát lớp hiển thị và thứ tự phần tử rất dễ dàng.
• z-* rất quan trọng trong các layout có nhiều lớp như header, popup, tooltip…
• order-* rất hữu ích khi bạn cần thay đổi bố cục trên mobile/desktop mà không phải thay đổi HTML gốc.

---

Bài tiếp theo

Bạn đã học gần xong Phần 2! Trong bài tiếp theo — bài 20, bạn sẽ tổng hợp tất cả kiến thức từ layout, flex, grid, spacing, position… để tạo một layout sản phẩm thực tế và responsive.

Cụ thể, bạn sẽ:

• Dùng Grid để chia cột
• Sắp xếp nội dung sản phẩm và nút
• Làm responsive theo breakpoint md, lg
• Áp dụng màu sắc, bo góc, spacing, shadow…

---

Hẹn gặp bạn trong bài 20: Thực hành – tạo layout card sản phẩm responsive với Tailwind CSS. Bài thực hành này sẽ là cơ hội tốt để bạn củng cố lại toàn bộ kiến thức vừa học!