コーディング中、右側に謎の余白が出現します

いつもお世話になっております。
表題の件です。コーディングを順調に進めていましたが、途中で右側に謎の余白ができました。
cssで、position: absolute;を指定したら余白ができます。
cssでbackground-imageで画像を挿入し、画像の上にテキストを書いています。
そのテキストを表示されるためにposition: absolute;を指定したところです。
この指定がないと、テキストが画像の下に行ってしまいます。

前にも同じような質問をさせていただきましたが、その時もposition: absoluteが入っていました。
position: absoluteをいれるとどうして余白ができてしまうのでしょうか？
また、ネットで対策を色々と講じましたが解決できませんでした。

どうぞよろしくお願いいたします。

No.4 ベストアンサー 回答者： t_fumiaki 回答日時： 2020/09/10 11:39

先ず背景画像指定background-imageでは、高さ基準が無いので、強引に高さ基準を作ります。

(background-imageを使う場合の裏技です）
.top内のどこでも良いので
padding-bottom:10%;を追加。値は調整して下さい。
これで強引に高さ基準が出来ました。

文字がはみ出る原因は、font-sizeに固定の20pxを指定してるからです。
画面横幅を狭めても、文字サイズが変わらないのではみ出ます。
font-size: 20px;
↓
font-size: 4vw;　ビューポートに連動して文字サイズを可変とします。
値は調整して下さい。

この回答へのお礼

回答いただきありがとうございます。
すべて解決しました！！
本当に感謝いたします！

お礼日時：2020/09/10 12:11

No.3 回答者： t_fumiaki 回答日時： 2020/09/09 16:25

レスポンシブで一番厄介な部分です。

レスポンシブで無ければ、テキストのdivの背景画像をcssで指定すれば一件落着なのですが、レスポンシブにすると、テキストと画像がずれてしまいます。

幅を狭めるほどズレが大きくなります。

その部分の具体例(htmlとcssがどうなってるか)が無いと説明は難しいです。
一番のハマリ処なので・・・・・。

この回答へのお礼

回答いただきありがとうございます。htmlとcssは下記のようになっております。
引き続き回答いただければ幸いです。お手数ですが何卒よろしくお願いいたします。

html
<section class="top">
<div class="top_title">
<h4>テキストテキストテキストテキストテキスト</h4>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="reservation">
<p>テキスト</p>
</div>
</div>
</section>

css
.top{
width: 100%;
height: 0px;
padding-top: 36.6032211%;
background-image: url(images/mv.jpg);
background-size:cover;
background-repeat: no-repeat;
position: relative;
top: 0;
left: 0;
}
.top_title{
position: absolute;
top: 16%;
left: 20%;
width: 100%;
font-size: 20px;
line-height: 5em;
}

お礼日時：2020/09/10 06:26

No.2 回答者： fujillin 回答日時： 2020/09/09 14:46

こんにちは

position:absolute は、表示の前後を制御する目的のものではありません。
（結果的にabsoluteの要素は前面に表示されることになりますが…）

前後の制御だけが目的なら、z-indexをご利用なさるのがよろしいかと。
https://developer.mozilla.org/ja/docs/Web/CSS/z- …
でも、これだけでは要素は重なりませんので、要素を重ねるて表示させるのには、やはりmarginやpositionなどで重なるような指定を併せて行うことになるとは思いますが・・・

position:absoluteの場合、（結果的に）その要素は前面に表示されるようになるので、「表示位置を制御する（＝重なった位置に表示する）」という指定をすることが、前面に表示させることになるのでz-indexはわざわざ指定していないものと思います。
position指定の意味合いは以下の通りで、top、leftなどと合わせて表示位置を指定するものです。
https://developer.mozilla.org/ja/docs/Web/CSS/po …

No.1 回答者： naokita 回答日時： 2020/09/09 14:36

position: は、特殊な場合だけ利用しますが、

一般的には、簡易的には、CSSのbackgroundだけで良いでしょう。

　１，まずはテキストを表示させる。
　２，そのテキストの下（裏/背面）に背景画像を表示するだけの事

画像があろうが、なかろうが、画像によって、テキストがズレる事はありません！

例：
<div style="background: url(画像パス) no-repeat;">
テキスト～～～～
</div>

たった、これだけの事です。

更に、このテキストの位置や、画像の位置も変更する事も出来ますし、
背景画像が切れてしまう可能性があるので、高さなども指定します。
わざわざ、position:を利用しなくて良いです。

この回答へのお礼

回答ありがとうございます。
私も最初はそうしていて問題なかったのですが、
レスポンシブにするために、画像に、
width: 100%;
height: 0px;
padding-top: 36.6032211%;
という指示を追加しました。
こうすると、元々画像の上にあったテキストが下にずれてしまうので、
position　でテキストの場所を調整したら、右側に余白ができて、、
という事の次第です。。

お礼日時：2020/09/09 15:10