父级div类的z-index高于子级

Question

I wish to lay over a pattern indicating that an element is inactive.

li .inactive {
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVQImWNgQALTGgr+k8phYGAAAFSlChVXUdguAAAAAElFTkSuQmCC) repeat;
}

This is a transparent png with a cross pattern: ///// so contents below can be semi-visible.

The problem is that since the children elements are within, they are not really covered by the background image; its just seems that they are covered. Its particularly ineffective on images with white areas.

So I tried using a higher z-index for a parent and lower for a child???

li .inactive {
     z-index: 9999;
}
li .inactive * {
     z-index: -1;
}

Any ideas?

Answer 1

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

try setting your elements to position:relative , and then apply the z-index