即使相對位置，z索引也不起作用

Question

我試圖將元素移到列表的底部，然后將它們向上移，放大，然后將它們添加到剪切路徑（clip-path）下的文本塊中僅適用於Opera，Chrome和Safari）。

問題是我無法使元素顯示在文本塊的頂部。 無論我嘗試什么，它都隱藏在主要元素后面。

有人對我要去哪里有什么想法嗎？

先謝謝您的幫助。

<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檢查更新的小提琴中隱藏的溢出

#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;
}