title: making a custom image frame in css by overlapping divs, but not being able to access the image anymore
body: <p>I'm trying to make a custom, irregular frame for a google maps iframe. You can see my results so far here:</p>
  
  <p><a href="http://bufident.com/pruebas/site02/contacto/contacto.html" rel="nofollow">http://bufident.com/pruebas/site02/contacto/contacto.html</a></p>
  
  <p>(please forgive the sloppy markup)
  The only way I could think up of doing this was by having 1 div with the frame overlapping the div with the map like this</p>
  
  
              
  
  <pre><code>        &lt;div style="width:418px; height: 375px;position:relative;top:-375px;z-index:3;"&gt;
          &lt;iframe width="418" height="375" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=bufident&amp;amp;hl=en&amp;amp;sll=40.397236,-3.704112&amp;amp;sspn=0.071946,0.071946&amp;amp;ie=UTF8&amp;amp;t=h&amp;amp;view=map&amp;amp;cid=5584215307643134377&amp;amp;hq=bufident&amp;amp;hnear=&amp;amp;ll=40.397238,-3.704109&amp;amp;spn=0.006128,0.008948&amp;amp;z=16&amp;amp;iwloc=A&amp;amp;output=embed"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, if i do this i'm no longer able to interact with the map. I tried a slightly different method suggested in another thread ( <a href="http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html" rel="nofollow">http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html</a> ) but i get the same results
  Any suggestions? thanks everyone</p>