CSSを使用したスティッキーディビジョン位置

Question

デジタルドラムセットを作成しようとしています。私はドラムセットのイメージを持っており、各ドラムに丸いヒットパッドを配置したい。私はビューのサイズを変更するときにヒットパッドを所定の位置に保つのが難しいです。私はdivを適切な位置に保つためにブートストラップを使ってみましたが、リサイズはヒットパッドを左に積み重ねるだけで動作しないことを発見しました。表示サイズが変わると、ドラムセットの背景画像の上にCSSを使用してヒットパッドを維持する方法はありますか？以下は現在のHTMLとヒットパッドを配置しようとしているドラムセットのイメージです。助けをよろしくお願いします。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12"> 
      <img id="playboard" src="drums.png" alt=""> 
       <div class="row" style="height: 100px"> 
       </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit hihathit animated pulse infinite" ng-audio="hihat.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit crashhit animated pulse infinite" ng-audio="crash.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit ridehit animated pulse infinite" ng-audio="ride.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomonehit animated pulse infinite" ng-audio="tomone.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomtwohit animated pulse infinite" ng-audio="tomtwo.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit snarehit animated pulse infinite" ng-audio="snare.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit kickhit animated pulse infinite" ng-audio="kickdrum.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit floortomhit animated pulse infinite" ng-audio="floortom.mp3" start="0.1"></button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは「ヒットパッド」を含むようにHTMLテーブルまたはフレックスボックスを使用してみてください。サイズの値にパーセンテージを使用すると、ヒットパッドを背景画像と一緒に調整できると思います。

Answer 2

私はそれを理解しました。コンテナを相対に設定します。画像を幅100％、高さautoで貼り付けます。次に、ボタンのdivsをabsoluteに設定し、上、右、左、下を使用します。