css - z-index 即使相对位置也不起作用

Question

我试图让右边的元素，一旦它们到达列表底部，向上移动，放大，然后我将它们缩小，然后将它们添加到剪辑路径下的文本 block 中( clip-path 仅适用于 Opera、Chrome 和 Safari)。

问题是我无法让元素显示在文本 block 的顶部。无论我尝试什么，它都隐藏在主要元素后面。

有人知道我哪里出错了吗？

在此先感谢您的帮助。

<style>
#main {
position: absolute;
z-index: -2;
top: 0px;
left: 0px;
width: 900px;
height: 862px;
overflow: hidden;
webkit-clip-path: polygon(73% 1.05%, ...);
clip-path: polygon(73% 1.05%, ...);
}

#side {
position: absolute;
top: 0px;
left: 900px;
font-size: 14px;
display: inline-block;
width: 490px;
height: 862px;
vertical-align: top;
text-align: center;
overflow: hidden;
margin-top: -45px;
z-index: -1;
}

.entry {
position: relative;
padding-bottom: 20px;
z-index: 20;
}

.exit {
position: relative;
padding-bottom: 20px;
z-index: 20;
}
</style>


<script>
...
$('#side div:gt(15)').animate({
    top: "-=750",
    left: "-=550",
    width: "+=350",
    height: "+=50",
    fontSize: 20
}, 2000, function() {
// Animation complete.
}); 
...
</script>



<div id="main">Lorem ipsum dolor sit amet ...</div>

<div id="side">
<div class="entry exit">Dave O'Brien - 52 - Fountain Valley, Ca.<br /><b>"Courage is not following the pack."</b></div>
...
</div>

我复制了我认为是相关的代码。这是一个带有完整代码的工作 JSFiddle: http://jsfiddle.net/design523/9t79z4sq/

这个演示在一个循环中使用了十个左右的引号。稍后将从数据库中一次拉出许多报价。

Answer 1

只需删除隐藏在#side css 检查更新中的溢出 fiddle

#side {
    position: absolute;
    top: 0px;
    left: 900px;
    font-size: 14px;
    display: inline-block;
    width: 490px;
    height: 862px;
    vertical-align: top;
    text-align: center;
    margin-top: -45px;
    z-index: -1;
}