z-index priority on ul and child

Question

Basically I want a relative element to hide its absolute child on the z plan.

ul {z-index:10; position:relative;}
ul ul {z-index:-10; position:absolute;}

They are positonned on top of each other. The first should hide its child, but it's not happening that way.

See the fiddle. I try to make the red part disappear under the blue one.

Any help muy appreciated

Thank you

Thanks for the answer but this way makes me use a negative z-index for my wrapper which I do not want. — kursus, Jun 01 '12 at 03:31
Very similar question: http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child — Brilliand, Jun 01 '12 at 06:34

score 3 · Accepted Answer · answered Jun 01 '12 at 06:42

The specific thing you're trying to do can't be done. By setting a z-index on the parent ul, you cause that element to become a new stacking context, which according to the spec, means that its background and borders will always sit below all of its child elements.

The effect you want may still be achievable if you remove the z-index setting from the parent ul. This doesn't mean that you have to adjust the rest of the z-indexes in your page to compensate; all you have to do is provide another element to be the context - for instance, the parent element of the parent ul. To make that element a stacking context, you just have to give it a z-index value - any z-index value, so long as it's a number.

z-index priority on ul and child

1 Answers1