

簡単な質問かもしれませんがハマってしまってわかりません。  
positionのrelativeとabsoluteを使って画像を2つ少し重ねて配置しました。

PCのウインドウサイズ？の拡大・縮小を行うと位置がずれていって100％の際に配置した場所からずれていってしまいます。

ずっと同じように配置しておきたいのですが、拡大・縮小をしてもレイアウトが崩れない方法を教えてください。  
よろしくお願いいたします。

以下参考コードです。

[code]

    </head>
    <body>
    <img src="test.jpg" width="25%" style="position: relative;">
    </br>
    <img src="test2.jpg" width="19%" style="position: absolute; left: 100px; top: 57px;">
    </body>
    
[/code]


CC BY-SA 4.0
2019-04-12T21:38:39.257
54130
2019-04-19T05:00:01.347
2019-04-13T01:30:27.063
19110
32901
question
css
positionを使って配置した画像２つの位置を固定したい


質問文のコードでは、`top`,
`left`プロパティの値が固定であることに対して、`width`属性にはパーセント値が指定されています。この状態では、画面幅により画像の横幅が変化したとしても、画像は常に固定の場所に配置されます。また、それぞれの画像の横幅に指定されたパーセント値が異なるため、ウィンドウサイズが変化するほど、画像の間に生じるずれは大きくなります。

絶対配置された要素はドキュメントフローから除外されるため、その他の兄弟要素を基に位置を指定することが出来ません。よって、
**質問者さん行いたいことは`position`プロパティでは不可能**です。

質問者さんの実現したいことは、以下に示すどちらかの方法で実現可能だと思います。

  * `margin`プロパティに負の値を指定する。
  * `transform`プロパティの`translate`関数を利用する。

今回は、`transform`プロパティの`translate`関数を利用した例を記述します。画像の位置は適宜調整してください。

[code]

    img:nth-of-type(2) {
      transform: translate(-100%, -15%);
    }
[/code]

[code]

    <img src="http://placehold.jp/ffa/ffffff/150x150.png?text=%20" width="25%">
    <img src="http://placehold.jp/faf/ffffff/150x150.png?text=%20" width="19%">
[/code]


CC BY-SA 4.0
2019-04-19T05:00:01.347
54312
2019-04-19T05:00:01.347
32986
54130
answer