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

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

干杯！

子div不会在添加z-index的情况下重叠父div

1 个答案: