CSS: Thuộc Tính Z-index

Thuộc tính z-index

Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.
Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0.

Có thể sử dụng số âm.
Giá trị tốt nhất là không sử dụng đơn vị.
Chú ý: z-index chỉ làm việc cùng với thuộc tính position.

Cấu trúc

tag {
    z-index: giá trị;
}

Với giá trị sau:

Ví dụ

<div>
<p class="element01">Thành phần 01</p>
<p class="element02">Thành phần 02</p>
</div>

CSS ban đầu

div {
    position: relative;
}

p.element01 {
    background: red;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 200px;
}

p.element02 {
    background: blue;
    height: 50px;
    left: 30px;
    position: absolute;
    top: 30px;
    width: 200px;
}

Hiển thị khi chưa có thuộc tính z-index

Thành phần 01

Thành phần 02

Thêm thuộc tính z-index vào CSS

div {
    position: relative;
}

p.element01 {
    background: red;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 200px;
    z-index: 1;
}

p.element02 {
    background: blue;
    height: 50px;
    left: 30px;
    position: absolute;
    top: 30px;
    width: 200px;
}

Hiển thị khi có z-index

Thành phần 01

Thành phần 02

Ví dụ thực tế