CSSにおいて、画像の上に文字を乗せる方法についての質問

画像の上に文字を入力したいと考えております。今回画像はtext-align: center;で中央揃えを行いその画像にposition: relative;で位置の基準を設けました、しかし位置の基準が画像ではなく画面の左上になってしまいます。どうすればいいでしょうか？

HTML
1<div class = "header_logo">
2        <img src="key-visual.png" alt="社内イメージ">
3        <p>こんにちは</p>
4        <h1>初めまして</h1>
5    </div>

css
1.header_logo{
2    text-align: center;
3    position: relative;
4    
5    
6
7}
8.header_logo img{
9    
10    vertical-align: top;
11    width: 1200px;
12
13    
14}
15.header_logo p{
16    color:white;
17    font-size: 16px;
18    font-family: Roboto;
19    font-weight: normal;
20    position: absolute;   
21    top:0px;
22    left:0px;
23    
24    
25    
26}
27.header_logo h1{
28    color:white;
29    font-size: 60px;
30    font-family: Arial, Helvetica, sans-serif;
31    font-weight: bold;
32    position: absolute; 
33    top:68.7%;
34    left:15.4%  
35    
36    
37    
38}

行動規範の内容に同意します

回答1件

ベストアンサー

.header_logo pと.header_logo h1でposition: absolute;を設定していますが、その基準は祖先でposition: relative;を設定している.header_logoになります。

位置の基準が画像ではなく画面の左上になってしまいます。

たぶん、.header_logoの幅も位置もbodyと同じですね。なので画面の左上が基準になります。
画像の左上を基準にしたいのなら、画像を表示したい幅のインラインブロックを用意してそれを基準の祖先とすることです。

HTML
1<div class="header_container">
2  <div class="header_logo">
3    <img src="key-visual.png" alt="社内イメージ">
4    <p>こんにちは</p>
5    <h1>初めまして</h1>
6  </div>
7</div>

CSS
1.header_container {
2    text-align: center;
3}
4.header_logo {
5    display: inline-block;
6    position: relative;
7    width: 1200px;
8}
9.header_logo img {
10    width: 100%;
11}
12.header_logo p {
13    color: white;
14    font-size: 16px;
15    font-family: Roboto;
16    font-weight: normal;
17    position: absolute;
18    top: 0;
19    left: 0;
20    margin: 0;
21}
22.header_logo h1 {
23    color: white;
24    font-size: 60px;
25    font-family: Arial, Helvetica, sans-serif;
26    font-weight: bold;
27    position: absolute; 
28    top: 68.7%;
29    left: 15.4%;
30    margin: 0;
31}

投稿2021/08/12 14:57

編集2021/08/12 15:03

itagagaki

総合スコア8402

yohu_gakusei

2021/08/13 02:23

返信ありがとうございます。 .header_logoの幅も位置もbodyと同じですね。なので画面の左上が基準になります。大変申し訳ございません。この部分が理解できませんでした。つまり画像自体を基準とするのではなく画像と同じ大きさのインラインブロックを用意しそれを基準として画像、文字をposition: absolute;するということでしょうか？無知で申し訳ございません。

itagagaki

2021/08/13 02:43

たとえば <body> <div> ... </div> </body> この場合、たとえばbodyが画面いっぱいだとしたら、そのこの子のdivの幅も画面幅と同じで、場所も画面の一番上になりますね。まずこれは理解できますか？そして、あなたのコードでは <body> <div style="text-align: center; position: relative;"> ... </div> </body> となっているわけですが、このdivも、それ自身の位置や幅についての設定の変更は無いので、幅や配置に変わりはありません。これもわかりますか？で、あなたのコードでは、このdivの子孫のブロックに position: absolute; を設定していて、その基準は上記のdivになりますので、画面左上が基準となっているということです。これもいいですか？ position: absolute; の基準を画像にしたいなら、画像の位置と幅がその祖先に無ければなりませんが、img はインライン要素なので、その中に子要素を持つことはできず、したがって img は、position: absolute; を設定した要素の祖先になることはできません。そこで、画像を表示する大きさと同じインラインブロックを作り、画像はその子要素として表示させ、他のposition: absolute; を設定した要素も、そのインラインブロックの子要素にして、そのインラインブロックを position: relative; として基準にするということです。

yohu_gakusei

2021/08/13 11:54

なるほど、丁寧な説明でやっと理解することができました。私のような初心者相手にここまで丁寧な対応をしていただき本当にありがとうございました。

行動規範の内容に同意します