背景画像上のCss絶対配置要素（応答）

Question

私は応答性の高い背景画像を持っているので、画面のサイズを変更するとその幅と高さが変わります。その背景には、ポジションアブソリュートの要素があります。

CSS：

さて、私の問題は、画面のサイズを変更する際、絶対的位置付け要素は

これは私のHTMLコードです...背景画像の上にその場所に従っていないということです

#all { 
    width: 100%; 
    height: 600px; 
    position: relative; 
    max-width: 1240px; 
    background: url('beach_to_meter.svg') no-repeat; 
} 
#clicked1 { 
    position: absolute; 
    left: 27%; 
    top: 28%; 
    z-index: 100; 
    width: 200px; 
} 
#clicked1 .box { 
    width:14vw; 
    max-width: 180px; 
} 

フルスクリーンは次のようなものです： enter image description here しかし、画面が小さい場合には、このような絶対的な位置付け要素が移動し、： enter image description here ここにコードを入力

Answer 1

まあまあ、画像を別の場所に表示するには、vwとvh（垂直幅、垂直高さ）を試してみてください。 これで問題が解決しない場合は、pxを使用し、javascriptで画面のサイズを検出して、要素の配置先を確認してください。

Answer 2

私は、CSS Transform-translateが要素を整列させるのに役立つと思いますか？多分あなたはそれを試してみましょうか？

#clicked1 .box { 
    transform:translateY(25%); 
    transform:translateX(25%); 
} 

詳細情報：https://www.w3schools.com/cssref/css3_pr_transform.aspあなたは小さな絵は、常に大きな画像の高さの約25％をとどまることを定義することができます。私はあなたのイメージソースを持っていないので、私は試してみることができませんでした。しかし、これが役立つことを願っ