Điều chỉnh thứ tự xếp chồng phần tử trên trục Z trong CSS

Thứ tự xếp chồng của các phần tử có thể được điều chỉnh bằng thuộc tính z-index, nhận giá trị là các số nguyên dương hoặc âm, hoặc số không. Thuộc tính chỉ hoạt động đối với các phần tử có giá trị position được đặt là absolute, fixed hoặc relative.

Khi sử dụng thuộc tính này, quy tắc xếp chồng phần tử như sau: phần tử nào có giá trị z-index lớn hơn sẽ nằm trên.

Hãy thay đổi thứ tự xếp chồng của các phần tử từ ví dụ trước. Để làm điều này, hãy đặt z-index cho phần tử thứ nhất lớn hơn phần tử thứ hai, ví dụ như sau:

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

Kết quả thực thi mã: