Cơ bản về z-index

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 59 trên 76.

Trong CSS, thuộc tính z-index kiểm soát thứ tự xếp chồng của các phần tử được định vị (các phần tử có giá trị position khác static). Khi các phần tử chồng lên nhau, z-index xác định phần tử nào hiển thị ở trên và phần tử nào nằm phía sau. Các phần tử có giá trị z-index cao hơn sẽ được xếp phía trước các phần tử có giá trị thấp hơn.

Đây là cú pháp cơ bản để sử dụng thuộc tính z-index:

selector {
    position: relative; /* hoặc absolute, fixed, hoặc sticky */
    z-index: value;
}

position: relative; (hoặc absolute, fixed hay sticky): Phần tử phải được định vị thì z-index mới có tác dụng.

value: Giá trị số nguyên thể hiện thứ tự xếp chồng. Phần tử có giá trị cao hơn sẽ nằm phía trước phần tử có giá trị thấp hơn. Giá trị có thể là số dương, số âm hoặc số không.

Ví dụ:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

Trong ví dụ này, cả .box1 và .box2 đều được định vị tuyệt đối. Vì .box1 có giá trị z-index cao hơn nên nó sẽ nằm phía trước .box2 khi hai phần tử chồng lên nhau.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có ba phần tử (<div>) chồng lên nhau, với các lớp box1, box2 và box3. Nhiệm vụ của bạn là dùng thuộc tính z-index để điều khiển thứ tự xếp chồng của các phần tử này. Làm theo các bước sau:

Viết một quy tắc CSS nhắm đến phần tử <div> có lớp box1. Đặt thuộc tính position thành absolute, top thành 0, left thành 0 và z-index thành 3.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp box2. Đặt thuộc tính position thành absolute, top thành 20px, left thành 20px và z-index thành 2.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp box3. Đặt thuộc tính position thành absolute, top thành 40px, left thành 40px và z-index thành 1.

Quan sát cách các giá trị z-index ảnh hưởng đến thứ tự xếp chồng của các hộp, với box1 ở trên cùng và box3 ở dưới cùng.

Tự làm thử

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>