【CSS】写真を横並びにして、テキストを上に載せたいがレイアウトが崩れる
【実現したいこと】
• 3枚の写真を横並びにする
• 各写真の上にテキストを載せる
【発生している問題】
最初は3枚の写真が横並びになっていましたが、左端の写真に position: absolute; を適用し、テキストを載せるコードを書いたところ、レイアウトが崩れました。
【知りたいこと】
• 写真を横並びにしつつ、上にテキストを載せる場合、どのような考え方で実装すればよいか？
• position: absolute; を使うとレイアウトが崩れる原因は何か？
• より適切な方法（例えば position: relative; を使う、display: flex; で管理する など）はあるのか？
【試したこと】
• display: flex; で横並びに配置する
• position: relative; を親要素に指定してみる
しかし、意図したように配置できませんでした。
【質問の意図】
「この場合はこう書けばOK」という正しいコードだけでなく、このようなレイアウトを実装するときの考え方 を知りたいです。
どのように設計すれば、意図したレイアウトを保ちつつテキストを配置できるか、ご教授いただけると助かります！
該当するソースコード
<!DOCTYPE html>
<html lang="Ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宮崎製作所</title>
<link rel="stylesheet" href="style.css">
<!-- reset.css ress -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
</head>
<body>
<section>
<h1>宮崎製作所について</h1>
<div class="container">
<div class="image">
<div class="mountain">
<img src="img/mountainーsikaku.jpg" alt="">
<p>地域との歩み</p>
<a href="">詳しく見る</a>
</div>
<img src="img/wolf-sikaku.jpg" alt="">
<img src="img/apple-sikaku.jpg" alt="">
</div>
</div>
</section>
</body>
</html>
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
}
h1 {
text-align: center;
font-weight: lighter;
}
.image .mountain {
display: flex;
justify-content: space-around;
}
.image img {
max-width: 30%;
/* height: auto; */
}
.mountain {
position: relative;
}
p {
color: beige;
font-size: 50%;
position: absolute;
top: 150px;
}
a {
color: beige;
font-size: 30%;
position: absolute;
top: 200px;
}
0
