出現在容器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容器。