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>