子div不會與z-index相加的父母div

Question

我有問題讓我的viewproductbutton超過它的父div。我已經爲該元素添加了一個z-index，並嘗試將其定位爲position: relative;和position: absolute;。沒有什麼能夠按照我的意願將它定位在右上角。

這裏是一個小提琴https://jsfiddle.net/Lrdswa5a/

我是什麼沒有做正確的

Answer 1

這裏是工作的jsfiddle：https://jsfiddle.net/Lrdswa5a/5/

如果你用下面的更換你的「.featuredproductspic」和「.viewproductbutton」 ：

.featuredproductspic { 
    /*width: 100%;*/ 
    border: 1px solid #D9D9D9; 
    min-height: 350px; 
    max-height: 350px; 
    float: left; 
    position: relative; 
} 

和

.viewproductbutton { 
    width: 150px; 
    padding: 15px 15px; 
    background-color: #909090; 
    color: #FFFFFF; 
    font-size: 1em; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    position:absolute; 
    top:0; 
    right:0; 
} 

然後該按鈕位於圖像的右上角。

乾杯！