divのbackgroundではなく、
imgの上に文字を配置したい時（alt属性を使いたい時など）
img{
max-width:100%;
/*自分以上には大きくならない&親要素に対して横幅100％*/
}
こう書いておくとidやclassの中に入っているimgも
そうでないのも全部にかかる
--->img_position.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ja">
<title></title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>imgの上に文字を配置</h1>
<div class="hero">
<div class="hero_img">
<img src="hero.jpg" alt="サラダの画像ですよ">
</div>
<div class="hero_title">
<h2>毎日の食事！<br>後略</h2>
<p>日々の食事が中略あなたへ</p>
</div>
</div>
<script src="test2.js"></script>
</body>
</html>
--->test2.css
@charset="UTF-8";
body{
background: #EFF;
}
img{
max-width:100%;/*自分以上には大きくならないand 親要素に対して横幅100％*/
}
.hero{
color: #fff;
position: relative;/*親要素にrelativeをかける。親要素を基準に子を動かしたい*/
}
.hero .hero_title{
position: absolute;
left: 4rem;
top: 50%;
transform: translateY(-50%);
}
注意！
.hero のあとに半角スペースが必要（子要素なので）
ただこれだと上下のはみ出た部分が隠れている
floatの話を思い出そう
横並びしたい箱に親要素
中に子要素、1列目に2箱（a,b）、2列目に1箱(c)
aとbにfloat
cにclear bothしないと親要素の高さが0のまま
場合によってはこの末っ子ｃがいない
→clearする場所がない
→方法は2つ
1.親要素にoverflow hiddenをかける
（はみ出たものは隠す。なんかしらないけど親要素の高さが戻る）
2.むりやり末っ子を作る
--->test2.css（コードが違ってる可能性あり）
@charset="UTF-8";
body{
background: #EFF;
}
img{
max-width:100%;/*自分以上には大きくならないand 親要素に対して横幅100％*/
}
.hero{
color: #fff;
position: relative;/*親要素にrelativeをかける。親要素を基準に子を動かしたい*/
}
.hero .hero_img{
height: 520px;
overflow: hidden;/*高さ520よりはみ出した部分を隠せ*/
}
.hero .hero_title{
position: absolute;
left: 4rem;
top: 50%;
transform: translateY(-50%);
}
