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

Answer 1

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.