title: CSS overflow hidden with absolute position
body: <p>I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:</p>
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div style=&quot;width: 500px; height: 200px; border: 1px solid black; overflow: hidden;&quot;&gt;
      &lt;div style=&quot;width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;&quot;&gt;On top of image.&lt;/div&gt;
      &lt;div style=&quot;position: absolute; top: 10px; left: 250px; z-index: -1;&quot;&gt;&lt;img src=&quot;http://www.google.com/logos/worldcupfinale10-hp.gif&quot; /&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>So, I want the right edge of the logo to not display. Ideas?</p>