0

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

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

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

以下参考コードです。

</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>
0

1 件の回答 1

2

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

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

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

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

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

img:nth-of-type(2) {
  transform: translate(-100%, -15%);
}
<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%">

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。