绝对元素出现在容器div的边界下面？

Question

有人可以告诉我为什么我不能使用z-index将此链接定位在包含div顶部边框的上方？链接到jfiddle here。代码如下：

<div class="social_story twitter ellipsis" style="word-wrap: break-word;">
    <a class="floating-icon" href="https://twitter.com/au_cadc" target=
    "_blank"></a>
</div>

.social_story{
    width: 100%;
    height: 358px;
    padding-bottom: 20px;
    margin-top: 20px;
    position: relative;
    background-color: #eeeeee;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    border-top: 30px solid #dd550c;
}

.floating-icon {
        position: absolute;
    width: 42px;
    height: 42px;
    top: -15px;
    left: 15px;
    background-color: white;
    border-radius: 25px;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    transition: all 250ms;
    z-index:2;
}

Answer 1

因为您overflow容器上的hidden设置为.social_story。