Nested div - position absolute - z-index

Question

I have a little problem with a nested div to be overlayed by its parent div, searched here already but no solution will fit for my problem.

Sample CSS:

#content {
    position: relative;
    top: 80px;
    min-height: 530px;
    width: 1000px;
    z-index: 2;
}
#category {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 1;
}

Sample HTML:

<div id="content">
    <div id="category"></div>
</div>

What it should look like:

The nested div #category should stick to the top right of the #content and should be behind it, so that the #content will overlay it. I know that it's maybe not the best way to handle it but I need to do it that way, due to the crappy style of the whole project (I'm just adjusting it a bit).

Thanks in advance!

Answer 1

In order to put child element behind it's parent, you have to use negative values for z-index:

#category {
    position: relative;
    z-index: -1;
}

Live demo: jsFiddle