Frontend hay gặpStacking context là một "tầng" độc lập theo trục z: các phần tử bên trong nó được xếp chồng so với nhau, và toàn bộ context được coi là một khối khi so với các context anh em bên ngoài. Đây là lý do khiến z-index "không nghe lời".
Điểm mấu chốt: z-index chỉ so sánh trong cùng một stacking context cha. Một phần tử z-index: 9999 nằm trong context có z thấp vẫn bị che bởi một context anh em có z cao hơn — vì so sánh diễn ra ở cấp context, không phải cấp phần tử toàn cục.
Một phần tử tạo stacking context mới khi (thường gặp):
- position khác static kèm z-index khác auto;
- position: fixed hoặc sticky;
- opacity < 1;
- transform, filter, perspective, clip-path, mask khác none;
- will-change với các thuộc tính trên, isolation: isolate;
- flex/grid item có z-index khác auto.
Cạm bẫy thường gặp: đặt opacity: 0.99 hay transform lên một phần tử cha vô tình tạo context mới, "nhốt" z-index của con lại → con không thể trồi lên trên phần tử ngoài context dù z rất lớn.
Gỡ rối: kiểm bằng DevTools (tab Layers), sửa thứ tự và cấu trúc DOM hoặc điều chỉnh z-index ở đúng cấp context cha chung, thay vì cứ tăng số; isolation: isolate là cách cố ý tạo context để cô lập z-index của một cụm UI.