无法获取z-index以使内容溢出

Question

我正在开发一个旧网站的项目，我试图不要在结构方面做太多改变（不在预算中）。我正处于最后一块css并遇到问题。在没有详细介绍设计细节的情况下，我有一个元素，其样式看起来像一个功能区，并挂在主要内容部分的外部。 overflow容器上的#inner正在关闭它，但需要overflow来包含所有帖子。

我put together a jsfiddle复制了这个问题，请忽略这个例子中可怕的非样式，只是试图表明问题。

如果您隐藏overflow: hidden;中的#inner，您会看到.category如何在外面徘徊。我一直在尝试使用z-index和position: relative;来解决问题，但它无效。

感谢您提供任何帮助。

Answer 1

如果你的父容器有一个隐藏的溢出，那么它的子节点或z-index无关紧要，它总会将其切断。

尝试使用div class“outer”添加功能区。让这个外包裹内部并给它一个相对的位置。

<div class="outer">
    <div class="ribbon"></div>        
    <div class="inner">
        Article thingy
    </div>
</div>

通过这种方式，您可以隐藏溢出内容并在文章周围添加内容。加上z-index为1将与z-index具有相同的效果：999