嵌套div - 位置绝对 - z-index

Question

我有一个问题,嵌套div被其父div重叠,在这里搜索已经但没有解决方案适合我的问题.

CSS示例:

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

示例HTML:

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

应该是什么样的:

嵌套的div #category应该粘在它的右上方,#content并且应该在它后面,这样它#content就会覆盖它.我知道它可能不是处理它的最佳方式,但我需要这样做,因为整个项目的糟糕风格(我只是稍微调整一下).

提前致谢!

Answer 1

为了将子元素放在它的父元素后面,你必须使用负值z-index:

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

现场演示:jsFiddle