[HTML]画像とテキストの位置を修正したい

前提・実現したいこと

画像の上にテキストを配置したり、
画像の位置を中央ではなく少し下にずらして配置したいのですが、
どう書けば良いのかわかりません。。

調べてはみたものの、探し方が悪いのか見当たらず、
ここで質問させて頂きたいと思います。

エディターはVScodeを使用しております。

イメージ図

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>テスト</title>
    <style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     html, body {
	background-image: url(../tool/image/001.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
    height: 100%;
     }
     body {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .question {
       font-size: 32px;
       font-weight: bold;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       color: black;
     }
     .answer {
       font-size: 32px;
       margin: 16px;
       border: none;
       appearance: none;
       padding: .5em .6em;
       display: inline-block;
       border: 2px solid #ccc;
       border-color: white;
       border-radius: 4px;
       vertical-align: middle;
       text-align: center;
       background-color: rgba( 0, 0, 0, 0.65 );
       color: white;
       height: 5em;
       width: 15em;
     }
     .answer:focus {
       outline: 0;
       border-color: white;
     }
    </style>
  </head>
  <body> 
      <div class="center">
       <img src="image/002.png" alt="monster" width="400" height="400"/>
      </div>
    <div class="container">
      <div class="question"></div>
      <input class="answer" value="" />
    </div>

    <script>
     const questions = [
       '旭川',
       '帯広',
     ]
     const answers = [
       'asahikawa',
       'obihiro',
     ]

     const question = document.querySelector('.question')
     const answer = document.querySelector('.answer')
     let index
     let count = 0

     function next() {
       if (count === 1) {
         alert('Congratulations!')
         return
       }

       if (questions.length) {
         count ++
         index = Math.floor(Math.random() * questions.length)
         question.textContent = questions[index]
       }
     }

     answer.addEventListener('keydown', (event) => {
       if (event.keyCode === 13) {
         if (answers[index] === answer.value) {
           questions.splice(index, 1)
           answers.splice(index, 1)
           answer.value = ''
           next()
         }
       }
     })
     next()
    </script>
  </body>
</html>

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

回答1件

ベストアンサー

異なるdivの座標を合わせるのは大変です。なので画像の中央に文字を配置するためには
「.center」の子要素に画像と.questionを設置し、
画像か.questionのどちらかをposition: absolute;にする方法がいいと考えます。

案1: 画像をposition: absolute;

HTML
1<div class="center">
2  <img src="image/002.png" alt="monster"> 
3  <div class="question"></div>
4</div>

CSS
1.center {
2  position: relative;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  width: 400px;
7  height: 400px;
8}
9.center img {
10  display: block;
11  position: absolute;
12  z-index: 0;
13  width: 100%;
14  height: 100%;
15}
16.center .question {
17  position: relative;
18  z-index: 1000;
19}

案2: テキストにposition: absolute;

HTML
1<div class="center">
2  <img src="image/002.png" alt="monster" width="400" height="400"> 
3  <div class="question"></div>
4</div>

CSS
1.center {
2  position: relative;
3}
4.center img {
5  display: block;
6  position: relative;
7  z-index: 0;
8}
9.center .question {
10  margin: auto;
11  width: 100%;
12  height: 1em; /* 高さを指定する必要があります。 */
13  position: absolute;
14  top: 0;
15  right: 0;
16  bottom: 0;
17  left: 0;
18  z-index: 1000;
19}

投稿2020/03/07 15:52

new1ro

総合スコア4528

Jonny_dayo

2020/03/07 17:11

ありがとうございます！ .center .question {}のtopをいじったらそれっぽくなりました！同様に画像とanswerの位置もいじろうと思ったのですが、 .center .question のコードを真似してみても場所がずれてしまうのですが、これはまた別の方法じゃないとだめなのでしょうか…？

Jonny_dayo

2020/03/07 17:22

あ、うそです！！！できましたありがとうございます！！！！！！！！

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