嵌套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 [{1}}应该贴在#category的右上方，并且应该在其后面，以便#content覆盖它。 我知道它可能不是处理它的最佳方式，但我需要这样做，因为整个项目的糟糕风格（我只是稍微调整一下）。

提前致谢！

Answer 1

为了将子元素置于其父元素后面，您必须使用z-index的负值：

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

现场演示：jsFiddle