如何在CSS中使用「寬度= 100％」的圖片覆蓋圖片？

Question

我需要在一幅圖像上疊加3幅圖像。如您所見，gittare，saxsofone和鼓的位置取決於寬度。它們應置於燈光下 。 我已經看到了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中的左側位置。

如果有工作接受答案！