CSS - Z-Index: Khám phá Nghệ thuật Lồng ghép các Element

Xin chào các pháp sư tương lai của thiết kế web! Hôm nay, chúng ta sẽ cùng lặn sâu vào một trong những thuộc tính kỳ diệu nhất của CSS: z-index. Nó giống như một siêu năng lực cho phép bạn kiểm soát哪些 element xuất hiện ở trên các element khác. Kì thú phải không? Hãy cùng bắt đầu hành trình này!

Z-Index là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu về z-index. Hãy tưởng tượng bạn đang sắp xếp một chồng giấy trên bàn. Z-index giống như việc bạn quyết định tờ giấy nào sẽ nằm trên các tờ khác. Trong thiết kế web, nó giúp chúng ta kiểm soát thứ tự chồng lên của các element chồng lên nhau.

Một bài học lịch sử ngắn

Trở lại những ngày đầu của thiết kế web, việc tạo ra các bố cục lớp là một cơn ác mộng. Chúng ta phải sử dụng các thiết kế bảng cồng kềnh hoặc phải nhờ đến khung công tác (ơ兮!). Rồi z-index xuất hiện, và bỗng nhiên, chúng ta có thể tạo ra các thiết kế phức tạp, chồng chéo một cách dễ dàng. Đó giống như phát hiện một lối đi bí mật trong trò chơi điện tử!

Các giá trị có thể có

Bây giờ, hãy cùng nhìn vào các giá trị khác nhau mà z-index có thể lấy:

Giá trị	Mô tả
auto	Giá trị mặc định. Các element được chồng theo thứ tự xuất hiện trong HTML
số	Có thể là số dương hoặc âm. Số cao hơn sẽ xuất hiện ở trên số thấp hơn
initial	Đặt z-index về giá trị mặc định
inherit	Kế thừa giá trị z-index từ element cha

Áp dụng cho

Z-index áp dụng cho các element có vị trí được xác định (position: relative, absolute, fixed, hoặc sticky). Nó không hoạt động trên các element tĩnh, tức là vị trí mặc định.

Cú pháp DOM

Dưới đây là cách bạn có thể đặt z-index trong HTML của mình:

<div style="z-index: 1;">Tôi ở trên!</div>
<div style="z-index: 0;">Tôi ở dưỡ!</div>

Nhưng hãy nhớ, thường tốt hơn nên giữ các style của bạn trong một file CSS tách biệt. Hãy xem nó trông như thế nào:

.on-top {
z-index: 1;
}
.below {
z-index: 0;
}

<div class="on-top">Tôi ở trên!</div>
<div class="below">Tôi ở dưỡ!</div>

CSS z-index - Giá trị auto

Khi bạn không xác định z-index, hoặc đặt nó thành 'auto', các element sẽ chồng lên nhau theo thứ tự chúng xuất hiện trong HTML. Hãy xem một ví dụ:

<div class="box red">Hộp Đỏ</div>
<div class="box blue">Hộp Xanh dương</div>
<div class="box green">Hộp Xanh lá</div>

.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: red;
left: 0;
top: 0;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
}
.green {
background-color: green;
left: 100px;
top: 100px;
}

Trong trường hợp này, hộp xanh lá sẽ ở trên cùng, tiếp theo là hộp xanh dương, sau đó là hộp đỏ. Đó giống như họ đang chơi trò nhảy dây!

CSS z-index - Với số nguyên dương

Bây giờ, hãy làm cho mọi thứ trở nên thú vị hơn một chút. Chúng ta có thể sử dụng số nguyên dương để kiểm soát rõ ràng thứ tự chồng lên:

.red {
background-color: red;
left: 0;
top: 0;
z-index: 3;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 1;
}

Với các giá trị z-index này, đỏ sẽ ở trên cùng, tiếp theo là xanh dương, sau đó là xanh lá. Đó giống như chúng tôi đã cấp vé VIP cho một câu lạc bộ đặc biệt, với đỏ là khách quan trọng nhất!

CSS z-index - Với số nguyên âm

Giá trị z-index âm giống như gửi các element xuống hầm. Chúng sẽ xuất hiện sau các element có giá trị z-index dương hoặc không:

.background {
background-color: yellow;
z-index: -1;
}
.content {
z-index: 0;
}

Ở đây, nền vàng sẽ luôn ở sau nội dung. Đó giống như.setup một背景 cho một vở kịch!

CSS z-index - Với vị trí dính

Vị trí dính giống như cho một element một giấy phép để rời khỏi luồng bình thường, nhưng chỉ dưới một số điều kiện. Z-index cũng hoạt động với vị trí dính:

.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}

Header này sẽ dính vào đỉnh của viewport khi bạn cuộn, và nó sẽ ở trên cùng của các nội dung khác nhờ vào giá trị z-index cao. Đó giống như một người bạn trung thành luôn có mặt để hỗ trợ bạn!

CSS z-index - Với vị trí cố định

Vị trí cố định tương tự như tuyệt đối, nhưng nó luôn tương đối với viewport. Z-index rất hữu ích ở đây:

.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}

Điều này đảm bảo rằng hộp thoại modal của bạn luôn xuất hiện trên cùng của lớp phủ. Đó giống như đảm bảo rằng ngôi sao của buổi biểu diễn luôn ở trong ánh sáng!

CSS z-index - Với vị trí tĩnh

Nhớ lại khi tôi nói rằng z-index không hoạt động với vị trí tĩnh? Đây là điều sẽ xảy ra:

.static-element {
position: static;
z-index: 999; /* Điều này sẽ không có tác dụng */
}

Đó giống như cố gắng sử dụng một pháp thuật trong thế giới của người thường - nó đơn giản là không hoạt động!

CSS z-index - Với vị trí tương đối

Vị trí tương đối là nơi z-index thực sự tỏa sáng. Nó cho phép bạn tạo ra các bố cục phức tạp mà không thay đổi luồng tài liệu:

.parent {
position: relative;
}
.child1 {
position: relative;
z-index: 2;
}
.child2 {
position: relative;
z-index: 1;
}

Ở đây, child1 sẽ xuất hiện ở trên child2, ngay cả khi child2 xuất hiện muộn hơn trong HTML. Đó giống như cấp cho các element siêu năng lực để chống lại lực hấp dẫn!

Và thế là bạn đã nâng cấp kỹ năng CSS của mình với sức mạnh của z-index. Hãy nhớ, với quyền lực lớn đi kèm với trách nhiệm lớn. Sử dụng z-index một cách khôn ngoan, và các bố cục của bạn sẽ cảm ơn bạn. Chúc các bạn may mắn và may mắn với z-index!

Credits: Image by storyset