Z-index trong CSS là thuộc tính dùng để kiểm soát thứ tự xếp chồng của các phần tử trên trục z (trục không gian thứ ba, chiều sâu) khi chúng được hiển thị trên trang web. Khi có nhiều phần tử được đặt chồng lên nhau, giá trị z-index sẽ xác định phần tử nào hiển thị phía trước và phần tử nào sẽ ở phía sau.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách sử dụng z-index trong CSS, nguyên tắc hoạt động của nó, các lưu ý khi sử dụng, và các ví dụ thực tế giúp bạn hiểu rõ cách áp dụng z-index vào thiết kế web.

1. Z-index là gì?

Z-index xác định thứ tự hiển thị của các phần tử trên trang web dọc theo trục z (từ trước ra sau). Khi các phần tử có cùng vị trí trên trục x (chiều ngang) và trục y (chiều dọc), z-index sẽ xác định phần tử nào xuất hiện phía trước hay phía sau.

  • Phần tử có z-index lớn hơn sẽ nằm phía trước các phần tử có z-index nhỏ hơn.
  • Mặc định nếu không có z-index, thứ tự xếp chồng sẽ phụ thuộc vào vị trí xuất hiện trong mã HTML: phần tử nào viết sau sẽ nằm trên.

Cú pháp:

css
element {
    z-index: value;
}

Trong đó:

  • value là một số nguyên (có thể âm hoặc dương) hoặc các từ khóa mặc định (auto), xác định thứ tự hiển thị của phần tử.

2. Khi nào sử dụng z-index?

Z-index được sử dụng trong các tình huống mà các phần tử có thể đè lên nhau, như khi làm việc với các menu thả xuống, cửa sổ modal, hộp thoại, hình ảnh và các hiệu ứng khác. Để z-index hoạt động, phần tử phải có một thuộc tính position (khác với static), như relative, absolute, fixed, hoặc sticky.

3. Các giá trị của z-index

3.1. z-index: auto

Giá trị auto là giá trị mặc định của z-index. Khi phần tử có giá trị z-index: auto, thứ tự hiển thị của phần tử sẽ phụ thuộc vào thứ tự xuất hiện trong DOM, phần tử nào nằm sau trong mã HTML sẽ nằm trên.

Ví dụ:

css
div {
    position: relative;
    z-index: auto;
}

3.2. z-index: số nguyên dương

Giá trị dương của z-index sẽ đưa phần tử lên phía trước so với các phần tử khác có giá trị z-index nhỏ hơn.

Ví dụ:

css
.box1 {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: absolute;
    z-index: 5;
}

Trong ví dụ này, box2 có giá trị z-index là 5 nên sẽ hiển thị phía trước box1, có giá trị z-index là 1.

3.3. z-index: số nguyên âm

Giá trị âm của z-index sẽ đẩy phần tử ra phía sau các phần tử có giá trị z-index bằng 0 hoặc lớn hơn.

Ví dụ:

css
.box1 {
    position: relative;
    z-index: 0;
}

.box2 {
    position: relative;
    z-index: -1;
}

Trong ví dụ này, box2 có z-index là -1 nên sẽ hiển thị phía sau box1 (z-index bằng 0).

4. Nguyên tắc hoạt động của Z-index

4.1. Chỉ hoạt động trên phần tử có position khác static

Thuộc tính z-index chỉ hoạt động khi phần tử có thuộc tính position được đặt là relative, absolute, fixed, hoặc sticky. Nếu position là static (mặc định), z-index sẽ không có hiệu lực.

Ví dụ:

css
.box1 {
    position: static; /* Z-index không hoạt động */
    z-index: 10;
}

.box2 {
    position: relative; /* Z-index hoạt động */
    z-index: 5;
}

4.2. Thứ tự xếp chồng theo DOM nếu không có z-index

Nếu không có z-index, các phần tử được hiển thị theo thứ tự xuất hiện trong DOM. Phần tử nào xuất hiện sau trong mã HTML sẽ được ưu tiên hiển thị phía trên các phần tử trước đó.

Ví dụ:

html
Thử online
<style>
.box1 {
    position: static; /* Z-index không hoạt động */
    z-index: 10;
}

.box2 {
    position: relative; /* Z-index hoạt động */
    z-index: 5;
}
</style>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Trong ví dụ này, box2 sẽ được hiển thị trên box1 dù không có z-index.

5. Ví dụ thực tế về z-index

Ví dụ 1: Sử dụng z-index để sắp xếp hình ảnh

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ về z-index - codetuthub.com</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .box1 {
            background-color: red;
            top: 50px;
            left: 50px;
            z-index: 1;
        }

        .box2 {
            background-color: blue;
            top: 70px;
            left: 70px;
            z-index: 2;
        }

        .box3 {
            background-color: green;
            top: 90px;
            left: 90px;
            z-index: 3;
        }
    </style>
</head>
<body>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</body>
</html>

Trong ví dụ này:

  • box1 có z-index: 1 nên nằm dưới cùng.
  • box2 có z-index: 2 nên nằm ở giữa.
  • box3 có z-index: 3 nên nằm trên cùng.

Ví dụ 2: Menu thả xuống với z-index

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu với Z-index - codetuthub.com</title>
    <style>
        .menu {
            position: relative;
            width: 200px;
            background-color: #333;
            color: white;
            padding: 10px;
        }

        .submenu {
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            width: 200px;
            background-color: #444;
            z-index: 100;
        }

        .menu:hover .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <div class="menu">
        Menu chính
        <div class="submenu">
            Menu phụ
        </div>
    </div>
</body>
</html>

Trong ví dụ này, z-index được sử dụng để đảm bảo menu phụ (submenu) luôn hiển thị phía trên các phần tử khác khi nó xuất hiện.

6. Lưu ý khi sử dụng z-index

6.1. Z-index và ngữ cảnh xếp chồng (stacking context)

Một ngữ cảnh xếp chồng (stacking context) được tạo ra khi một phần tử có một trong các thuộc tính sau:

  • z-index có giá trị khác auto và position là relative, absolute, fixed.
  • Thuộc tính opacity nhỏ hơn 1.
  • Thuộc tính transform, filter, hoặc perspective khác none.

Trong mỗi ngữ cảnh xếp chồng, các phần tử con chỉ có thể so sánh z-index với nhau. Bạn không thể so sánh z-index của một phần tử trong ngữ cảnh xếp chồng này với một phần tử trong ngữ cảnh xếp chồng khác.

6.2. Z-index âm

Z-index có thể nhận giá trị âm, tuy nhiên, khi đặt z-index âm, phần tử có thể bị hiển thị phía sau các phần tử nền, hoặc thậm chí bị ẩn nếu có phần tử cha khác phủ lên nó.

7. Kết luận

Z-index là một công cụ mạnh mẽ trong CSS giúp kiểm soát thứ tự xếp chồng của các phần tử trên trang web. Bằng cách hiểu rõ nguyên tắc hoạt động và cách sử dụng z-index, bạn có thể tạo ra các bố cục phức tạp và các hiệu ứng đồ họa như menu thả xuống, modal, và các phần tử động khác. Tuy nhiên, cần lưu ý rằng z-index chỉ hoạt động khi phần tử có thuộc tính position được đặt khác static và hãy cẩn thận với ngữ cảnh xếp chồng.

Hy vọng qua bài viết này, bạn đã nắm rõ cách sử dụng z-index trong CSS và có thể áp dụng nó một cách hiệu quả vào các dự án của mình!