CSS animation depth issue

HTML

<div id="hoverme" class="container">
    <div class="over">I should be over the next container</div>
</div>
<div class="container">I should be under the .over</div>

CSS

.container {
    background: rgb(255,255,255); /* Old browsers */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#efefef));
    background: -webkit-linear-gradient(#fff 0%, #efefef 100%);
    background: -moz-linear-gradient(#fff 0%, #efefef 100%);
    background: -o-linear-gradient(#fff 0%, #efefef 100%);
    background: linear-gradient(#fff 0%, #efefef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: block;
    width: 100%;
    border: 1px solid #c7c7c7;
    margin-bottom: 10px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    
    -webkit-animation-name: fadeIn; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation-name: fadeIn; /* Firefox < 16 */
        -ms-animation-name: fadeIn; /* Internet Explorer */
         -o-animation-name: fadeIn; /* Opera < 12.1 */
            animation-name: fadeIn;
    
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}
.container:hover {
    z-index:100;
}
#hoverme .over {
    display: none;
    padding: 20px;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    background: #efefef;
    z-index: 10;
    box-sizing: border-box;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
            box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
}

#hoverme:hover .over {
    display: block;
}

@keyframes fadeIn {
    0%     { opacity: 0; }
    100%   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes...