Child div 不会 over-lap parent div 添加 z-index

Question

我在让 viewproductbutton 超越 parent div 时遇到问题。我在元素中添加了 z-index，并尝试用 position: relative; 和 position: absolute; 定位它。没有什么能让它像我想要的那样定位在右上角。

这里是fiddlehttps://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;
}

那么按钮就在图片的右上角。

干杯！

Child div 不会 over-lap parent div 添加 z-index

Child div will not over-lap parent div with a z-index added

html

css

position

css-position