Chồng chéo css hai div

Chắc chắn các bạn đã từng cố gắng đặt z-index cho phần tử tuy nhiên lại không có kết quả như mong đợi. Đây là một thuộc tính tưởng tượng đơn giản nhưng đôi khi lại khá gây nhầm lẫn. Bài viết này sẽ giải thích rõ hơn về cách z-index hoạt động

Nội dung chính Hiển thị

• Thứ tự xếp chồng mặc định
• Stack với z-index
• Bối cảnh xếp chồng
• Kết luận
• Tham khảo

Thứ tự xếp chồng mặc định

Trước tiên ta cùng xem xét thứ tự mặc định mà trình duyệt duyệt lại phần tử nâng lên nhau từ sau lên trước

• Element root () dưới cùng
• Các phần tử không được định vị (tĩnh) theo thứ tự mã từ trên xuống dưới và đảo ngược phần tử gốc
• Các phần tử được định vị (tuyệt đối, tương đối, dính, cố định) theo mã thứ tự từ trên xuống dưới và đảo ngược các phần tử không được định vị

Ví dụ

HTML

CSS

/* Để xem full CSS, click link bên dưới*/
.blue, .pink, .orange {
  position: absolute;
}

https. // codepen. io/ivhed/bút/QrdEBB

Có thể thấy rằng khối màu xanh lá cây mặc dù có div nằm dưới cùng thứ tự từ trên xuống nhưng không được vị trí nên đã là những khối được vị trí khác chồng lên

Stack với z-index

To change theorderor up over default as on ta could used to the z-index. Phần tử có chỉ số z cao hơn sẽ hiển thị phần tử có chỉ số z thấp hơn. Cũng cần lưu ý rằng z-index chỉ có tác dụng với những phần tử đã được định vị

HTML

CSS

.blue, .pink, .orange {
 position: absolute;
}
.blue {
 z-index: 2;
}
/* Set z-index của block orange cao hơn block blue để hiện thị đè lên block blue */
.orange {
 z-index: 3;
}
.green {
 z-index: 100; /* không có tác dụng */
}

https. // codepen. io/ivhed/bút/xjqmpV

Bối cảnh xếp chồng

Giả sử ta muốn thêm một khối màu tím nằm bên dưới khối màu hồng

HTML

CSS

.blue, .pink, .orange, .purple {
  position: absolute;
}
.purple {
  z-index: 0;
}
/* Set z-index của block pink cao hơn block purple để hiện thị đè lên block purple */
.pink {
  z-index: 1;
}
.blue {
  z-index: 2;
}
.orange {
  z-index: 3;
}
.green {
  z-index: 100;
}

https. // codepen. io/ivhed/bút/YLZdjx

Bằng cách đặt chỉ số z của khối màu tím thấp hơn chỉ số z của khối màu hồng, khối màu tím đã nằm dưới khối màu hồng. Nhưng chuyện gì đã xảy ra khi block color cam lại bị đè dưới block color xanh da trời?

Vâng, lý do là khi ta đặt chỉ mục z cho khối màu hồng, ta đã tạo nên thứ gọi là bối cảnh xếp chồng. chỉ mục z của một phần tử chỉ có tác dụng trong phạm vi của ngữ cảnh xếp chồng bao hàm phần tử đó. z-index của block orange chỉ có tác dụng trong stacking context do block pink tạo ra vậy nên mặc dù nó cao hơn z-index của block blue thì block orange vẫn bị block blueđẩy lên làm 2 block này stacking context khác

Để khối màu xanh nằm bên dưới khối màu cam, ta có thể làm cho chúng có cùng bối cảnh xếp chồng bằng cách đặt div. blue at in div. Hồng

HTML

https. // codepen. io/ivhed/pen/erGoJE

Ngoài thuộc tính z-index thì khi đặt thuộc tính khác số cho phần tử ta cũng tạo ra ngữ cảnh xếp chồng mới ví dụ. lọc, độ mờ, biến đổi… Bạn có thể tham khảo thêm tại đây

Quay lại với ví dụ trước khi div đó. blue lines with div. Hồng. Lần này thay vì đặt z-index cho khối màu hồng, ta sẽ thử đặt bộ lọc thuộc tính cho khối này xem sao

HTML

CSS

https. // codepen. io/ivhed/bút/LmWMQb

Vâng và đúng như dự đoán khối màu cam đã bị chặn màu xanh lam

Kết luận

Khi muốn áp dụng chỉ mục z cho một phần tử, bạn cần định vị cho phần tử đó, đồng thời xác định bối cảnh xếp chồng của các phần tử để điều chỉnh sao cho hiển thị như mong đợi. Cảm ơn các bạn đã theo dõi