"width = 100％"の画像にCSSを重ねる方法は？

Question

1枚の画像に3枚の画像を重ねる必要があります。わかるように、ギターレ、サクソフォン、ドラムの場所は幅によって異なります。それらはライトの下に置かれるべきです 。 私はthisを見て、以下のコードを作った。 問題は、固定幅に依存しますが、デバイスの幅が変わるとどうなりますか？ここで

は、HTMLコードです：

<div class="stagePlace"> 

     <img src="./shared/images/stage.png" class="stage"/> 

     <div [dragula]="'second-bag'"> 

        <img src="./shared/images/gittare.png" alt="gittare" id="gittare"/> 

        <img src="./shared/images/drum.png" alt="drum" id="drum"/> 

        <img src="./shared/images/saxsophone.png" alt="saxsophone" id="saxsophone"/> 

     </div>  

</div> 

、ここでは、CSSです：

.stage{ 
    width: 100%; 
    position: relative; 
    height:600px; 
} 
.stagePlace{ 

    width: 100%; 
} 
#gittare{ 
    position: absolute; 
    top: 137px; 
    left: 258px; 
} 
#drum{ 
    position: absolute; 
    top: 137px; 
    left: 480px; 
} 

Answer 1

はこれにそれを行うだろう：https://jsfiddle.net/ghyy3wg1/2/

そして、あなたは次のようにする必要がありますCSS：

.stage{ 
    width: 100%; 
    position: relative; 
    height:600px; 
    z-index:1; 
} 
.stagePlace{ 
    width: 100%; 
} 
#gittare{ 
    position: absolute; 
    top: 137px; 
    left: 100px; 
    z-index:3; 
    height:20%; 
    width:35%; 
} 
#drum{ 
    position: absolute; 
    top: 137px; 
    left: 300px; 
    z-index:3; 
    height:20%; 
    width:35%; 
} 
#saxsophone{ 
    position:absolute; 
    height:20%; 
    width:35%; 
    left:500px; 
    z-index:3; 
    top:137px; 
} 

そして、ライトの下の項目を設定するには、CSSの左の位置を変更することができます。

回答を受け入れると！