by 3kadmin

The parent element has a lower z-index

The z-index of an element can only go as far as the maximum z-index of its parent (it cannot appear in a higher stacking context than its parent). Take for example;

.child {
z-index: 3;
}

.element-to-cover {
z-index: 2;
}

.parent {
z-index: 1;
}

In this case, you want to display the child< element over the element-to-cover element so you set the z-index to 3. This should work since it has a z-index higher than the element-to-cover, but because the parent element has a z-index of 1, the child element would not appear above the element-to-cover