title: Floating Div Over An Image
body: <p>I'm having trouble floating a div over an image. Here is what I am trying to accomplish: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .container {
         border: 1px solid #DDDDDD;
         width: 200px;
         height: 200px;
      }
      .tag {
         float: left;
         position: relative;
         left: 0px;
         top: 0px;
         z-index: 1000;
         background-color: #92AD40;
         padding: 5px;
         color: #FFFFFF;
         font-weight: bold;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
         &lt;div class="tag"&gt;Featured&lt;/div&gt;
         &lt;img src="http://www.placehold.it/200x200"&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this image:</p>
  
  <p><img src="https://i.stack.imgur.com/tJ2Tm.png" alt="enter image description here"></p>
  
  <p>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?</p>