绝对元素出现在容器 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

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