子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; 
} 

然后该按钮位于图像的右上角。

干杯！