After some further investigation, child element can't/aren't suppose to be able to overrule the parent z-index, some browser for example Firefox though ignores parent index for some reason and displays your elements are you wish but every other browser I've tried (Opera,Safari,Chrome) does not, so no it's not possible to accomplish what you want without changing the mark-up of your HTML for cross-browser compatibility.

Edit:

You can even find quite some posts in the subject.

css - z-index - Get a child of an element with lower z-index on front of another child of an element with higher

css parent element to appear above child

can I override z-index inheritance from parent element?

Edit - 2:

Depending on what you want to accomplish there is many alternative way you could get a fake "zindex" behaviour, one thing worth looking at is pointer-events:none; together with a transparent background you'd never know it's above the other element.

If it's for the background, you could use box-shadows with diffrent settings to fake it.

can't come up with any other reason atm but if you tell me i'll try to give you a solution for it aswell.

Regards