皆様よろしくお願いします。
レスポンシブサイトで画像を重ねる必要があり、まずは以下のように画像を縦に並べるシンプルなサンプルコードを書きました。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6 .container { 7 width: 100%; 8 margin: 0 auto; 9 background-color: green; 10 } 11 12 .parent img { 13 width: 100%; 14 } 15</style> 16</head> 17<body> 18 19<div class="container"> 20 <div class="top">トップ</div> 21 <div class="parent"> 22 <!-- img1とimg2は同じサイズ --> 23 <img src="img1.jpg"> 24 <img src="img2.jpg"> 25 </div> 26 <div class="bottom">ボトム</div> 27</div> 28 29</body> 30</html>
上記から以下のようにCSSのpositionを使うと、.parent内で重ねることはできたのですが、.bottomブロックが消えてしまいました。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6 .container { 7 width: 100%; 8 margin: 0 auto; 9 background-color: green; 10 } 11 12 .parent img { 13 width: 100%; 14 position: absolute; /* ← 追加 */ 15 } 16 17 /* ↓追加 */ 18 .parent { 19 position: relative; 20 } 21</style> 22</head> 23<body> 24 25<div class="container"> 26 <div class="top">トップ</div> 27 <div class="parent"> 28 <!-- img1とimg2は同じサイズ --> 29 <img src="img1.jpg"> 30 <img src="img2.jpg"> 31 </div> 32 <div class="bottom">ボトム</div> 33</div> 34 35</body> 36</html> 37
Chromeの検証ツールを使って調べてみると、.bottomブロックも重なってしまう?のか、画面の位置では.topブロックの下、
つまり重なった画像の背面に入ってしまいました。
.topブロック
2枚の画像
.bottomブロック
のように表示するにはどうしたらいいのでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/03 16:16