Đ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:
#elem1 {
z-index: 2;
}
#elem2 {
z-index: 1;
}
Kết quả thực thi mã:
Lặp lại trang theo mẫu sau:
Lặp lại trang theo mẫu sau:
