title: PNG image with "window" over another image
body: <p>I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
  <a href="http://jimmyweb.pl/projekty/dentmedica/" rel="nofollow">CLICK</a></p>
  
  <p>And here's my HTML markup:</p>
  
  <pre><code>    &lt;div id="slide6" class="slide"&gt;
          &lt;h1 class="big"&gt;Kontakt&lt;/h1&gt;
          &lt;h2 class="call"&gt;Zadzwoń: &lt;span class="thick"&gt;514 944 555&lt;/span&gt;&lt;/h2&gt;
          &lt;h2 class="mail"&gt;
              Napisz: &lt;a href="mailto:biuro@dentmedica.pl"&gt;&lt;span class="thick"&gt;biuro@dentmedica.pl&lt;/span&gt;&lt;/a&gt;
          &lt;/h2&gt;
          &lt;div id="iphone"&gt;
              &lt;img src="img/iphone.png" alt="" /&gt;
              &lt;div id="iphone-screen"&gt;
                  &lt;img src="img/iphone-screen.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#slide6 #iphone{
      position:absolute;
      bottom:0;
      right:0;
      width:40%;
      z-index:600;
  }
  
  #slide6 #iphone &gt; img{
      width:100%;
      height:auto;
      z-index:600;
  }
  
  #slide6 #iphone #iphone-screen{
      position:absolute;
      width:44.1%;
      overflow:hidden;
      bottom:24%;
      left:15%;
      z-index:100;
  }
  
  #slide6 #iphone #iphone-screen &gt; img{
      width:100%;
      height:auto;
      z-index:100;
  }
  </code></pre>
  
  <p>Thanks for any help!</p>