質問: 簡単な質問かもしれませんがハマってしまってわかりません。 positionのrelativeとabsoluteを使って画像を2つ少し重ねて配置しました。 PCのウインドウサイズ?の拡大・縮小を行うと位置がずれていって100%の際に配置した場所からずれていってしまいます。 ずっと同じように配置しておきたいのですが、拡大・縮小をしてもレイアウトが崩れない方法を教えてください。 よろしくお願いいたします。 以下参考コードです。 ``` ```
回答: 質問文のコードでは、`top`, `left`プロパティの値が固定であることに対して、`width`属性にはパーセント値が指定されています。この状態では、画面幅により画像の横幅が変化したとしても、画像は常に固定の場所に配置されます。また、それぞれの画像の横幅に指定されたパーセント値が異なるため、ウィンドウサイズが変化するほど、画像の間に生じるずれは大きくなります。 絶対配置された要素はドキュメントフローから除外されるため、その他の兄弟要素を基に位置を指定することが出来ません。よって、**質問者さん行いたいことは`position`プロパティでは不可能**です。 質問者さんの実現したいことは、以下に示すどちらかの方法で実現可能だと思います。 * `margin`プロパティに負の値を指定する。 * `transform`プロパティの`translate`関数を利用する。 今回は、`transform`プロパティの`translate`関数を利用した例を記述します。画像の位置は適宜調整してください。 ``` img:nth-of-type(2) { transform: translate(-100%, -15%); } ``` ``` ```