z-index not working even with position relative

Question

I am trying to get the elements on the right, once they reach the bottom of the list, to move up, enlarge, and then I will shrink them, then add them to the block of text under the clip-path (clip-path only works in Opera, Chrome and Safari).

The problem is I can't get the elements to show up on top of the block of text. No matter what I try it hides behind the main element.

Anyone have any ideas where I am going wrong?

Thanks in advance for the help.

<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>

I copied what I thought was the relevant code. Here is a working JSFiddle with the full code: http://jsfiddle.net/design523/9t79z4sq/

This demo uses ten or so quotes in a loop. Later it will be many quotes from a database pulled one at a time.

Answer 1

Just remove overflow hidden from #side css check updated 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;
}