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

Question

I am having issues getting my viewproductbutton to go overtop of it's parent div. I have added a z-index to the element and have tried to position it with position: relative; and position: absolute;. Nothing is getting it to position in the top right corner as I want it.

Here is a fiddle https://jsfiddle.net/Lrdswa5a/

What am I not doing right

Answer 1

Here is the working jsfiddle: https://jsfiddle.net/Lrdswa5a/5/

If you replace your '.featuredproductspic' and '.viewproductbutton' with the following:

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

and

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

Then the button is on the top right of the image.

Cheers!