Z-index là gì?
Còn gọi: thứ tự chồng lớp, z index, zindex, stacking order, stacking context
Z-index là thuộc tính CSS quy định phần tử nào nằm trên, phần tử nào nằm dưới khi chúng chồng lên nhau theo chiều sâu màn hình; số lớn hơn nằm trên.
Hiểu kỹ hơn
Z-index quyết định header dính có nằm trên nội dung khi cuộn không, menu thả xuống có bị thẻ bên dưới che không, modal và lớp phủ có trùm lên tất cả không. Nó chỉ có tác dụng với phần tử đã được định vị (position khác static) hoặc là phần tử con của flex, grid. Điểm dễ gây lỗi là 'ngữ cảnh chồng lớp' (stacking context): một phần tử có z-index 9999 vẫn có thể nằm dưới nếu khối cha của nó ở lớp thấp hơn. Trong Figma, thứ tự layer trong bảng Layers tương tự z-index. Design system tốt định nghĩa sẵn các tầng như nội dung, dropdown, header dính, lớp phủ, modal, toast, thay vì mỗi người tự đặt số tuỳ ý, tránh tình trạng popup bị header che.
