Why is z-index not working?

To make sure that z-index works on a web page you have to check the following:

• That the element where you have applied the z-index has the position attribute, which is equal to “absolute”, “fixed”, “relative”.

.my_elements { position: relative; }

If you don’t have a valid position defined, the z-index attribute will have no value.

• That the element where you have applied the z-index does not have a lower z-index than the element on which you want to superimpose.

This is important and can lead to hard-to-detect errors. For example, in the following code.

As much as you have marked the element of class “my_son”, a z-index of 1000, if you have placed it inside another element that has a z-index of 10, it will not get the value of z-index 1000.

Review these two situations and you will surely be able to solve your positioning problem.