CSS: Float a div on another div, Ex: Text caption on picture

<style type="text/css">
.figure {
width: 316px;
height: 205px;
display: block;
border-color: azure;
position: relative;
}
.figure img {
z-index: 0;
}
.figure .caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 22;
width:inherit;
display:inline-block;
color: #fff;
background-color: rgba(0,0,0,.5);
z-index: 100;
}
</style>

<div class="figure">
<img src="http://img-aws.ehowcdn.com/320x208/ehow-tech-blog-us/files/2014/07/google-maps-measure.gif" alt="[Article Image] - How to Supercharge Google Maps" title="How to Supercharge Google Maps" class="image">
<div class="caption"> How to Supercharge Google Maps </div>
</div>