html - 別の画像の上に「ウィンドウ」がある PNG 画像

Question

内部にpng img（このimgには穴があります）を持つ1つのdivが、その上の画像の穴に表示される内部にimgを持つ別のdivの上にあるときに、私は効果を達成しようとしていますが、今のところ、それは代わりに終わっています「ウィンドウ」付きのimgの下。そして、レスポンシブの問題（内側のdivのパーセンテージ幅は外側のdivの幅に関連しています）のため、ウィンドウ（「iphone」）のある画像を含むdiv内のimg（「iphone-screen」）の下にある必要があるdivを保持したいです。それを達成する方法は？ここに私のウェブサイトへのリンクがあります (ページ "Kontakt" に移動します): クリック

そして、これが私の HTML マークアップです。

    <div id="slide6" class="slide">
        <h1 class="big">Kontakt</h1>
        <h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
        <h2 class="mail">
            Napisz: <a href="mailto:biuro@dentmedica.pl"><span class="thick">biuro@dentmedica.pl</span></a>
        </h2>
        <div id="iphone">
            <img src="img/iphone.png" alt="" />
            <div id="iphone-screen">
                <img src="img/iphone-screen.png" alt="" />
            </div>
        </div>
    </div>

そしてCSS：

#slide6 #iphone{
    position:absolute;
    bottom:0;
    right:0;
    width:40%;
    z-index:600;
}

#slide6 #iphone > 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 > img{
    width:100%;
    height:auto;
    z-index:100;
}

助けてくれてありがとう！

Answer 1

divタグの問題だと思いますiphone-screen..削除してください