Floating Div Over An Image

Question

I'm having trouble floating a div over an image. Here is what I am trying to accomplish:

In this image:

I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?

Answer 1

Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
       position: relative;
    }
    .tag {
       float: left;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }

<div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
</div>

The key is the container has to be positioned relative and the tag positioned absolute.