ywx********

2020/11/23 11:59

22回答

プログラミングでのcssの質問です。 画像をペアで重ね合わせる方法が分かりません。

プログラミングでのcssの質問です。 画像をペアで重ね合わせる方法が分かりません。 <例> <html> <img id = "1" class = "style"> <img id = "2" class = "style"> <img id = "3" class = "style"> <img id = "4" class = "style"> <css> .style{ width : 100px; height : 100px; } この時にid="1"とid="2" , id="3"とid="4"のペアで完全に重ね合わせて表示したい場合はどうすればよろしいでしょうか？ 分かりにくくて申し訳ありませんが、教えて欲しいです。

HTML、CSS・15閲覧・xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

0

ybb********

カテゴリマスター

2020/11/23 15:36

ywx********さん >････画像をペアで重ね合わせる･･････････ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" > <style> .container { width:120px; margin:0 auto; background:#eef; display: grid; /* Grid Layoutで配置 */ grid: 100px 100px / 100px; justify-content: center; } .style{ opacity: 0.3; width:100px;height:100px; } #id1{ grid-row:1; grid-column:1; } #id2{ grid-row:1; grid-column:1; } #id3{ grid-row:2; grid-column:1; } #id4{ grid-row:2; grid-column:1; } </style> </head> <body> <div class="container"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297558.png" id = "id1" class = "style"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297526.png" id = "id2" class = "style"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297536.png" id = "id3" class = "style"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297543.png" id = "id4" class = "style"> </div> </body> </html>

その他の回答（1件）

0

nic********

2020/11/23 14:36

https://jsfiddle.net/k64fuedv/ 横に並べたいならdivが横に並ぶようにする（.wrapperにdisplay: inline-blockとか）。 absoluteを指定すると、自分の兄弟を無視して、親コンテナの位置だけを基準に位置決めするようになる。 「#i2を親コンテナ（div）の一番左から初めて0px（left: 0）」に配置したので、その位置にいる#i1と表示位置が被ったわけだ。 また、absolute要素は親コンテナのサイズを決める際の計算から除外される。 （この場合、inline-blockにしたdivは横幅100のimgが2つで横幅200になるはずだが、absoluteの方のimgが除外されるのでdivも横幅100になる） それと、id名やクラス名の先頭に数字は使えない。これは文法的なルール。