css - 嵌套 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并且应该在它的后面，这样div#content就会覆盖它。我知道这可能不是处理它的最佳方式，但我需要这样做，因为整个项目的风格很糟糕（我只是稍微调整一下）。

提前致谢！

Answer 1

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

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

现场演示：jsFiddle