Что такое stacking context и как работает z-index?

z-index управляет порядком наложения элементов по оси Z. Но работает только на позиционированных элементах (не static) и flex/grid-детях. Stacking context — это группа элементов, внутри которой z-index работает изолированно. Создаётся через position + z-index, opacity < 1, transform, filter и другие свойства. Элемент с z-index: 9999 внутри контекста с z-index: 1 будет ниже элемента с z-index: 2 из другого контекста. Это причина «z-index не работает».