absoluteをレスポンシブ対応させたい。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
親要素（relative）に背景画像を指定し、
子要素（absolute）に文字を入力していますが、
画面を狭めると、子要素（absolute）が親要素の背景からはみ出してしまいます。
子要素を、親要素と比例してレスポンシブ対応させることは可能でしょうか。
解決方法をお教え頂けますと幸いです。よろしくお願いいたします。
子要素（absolute）に文字を入力していますが、
画面を狭めると、子要素（absolute）が親要素の背景からはみ出してしまいます。
子要素を、親要素と比例してレスポンシブ対応させることは可能でしょうか。
解決方法をお教え頂けますと幸いです。よろしくお願いいたします。
A さん
12月10日 13時02分
Aさん、こんばんは。
大変恐縮なのですが、現在年末進行でバタバタしており、なかなか時間がとれません。
明日また改めてご返信します。
大変恐縮なのですが、現在年末進行でバタバタしており、なかなか時間がとれません。
明日また改めてご返信します。
馬場誠 さん
12月11日 20時23分
馬場様
こんばんは。
お忙しい中ご返信いただき、ありがとうございます。
お手隙の際で構いませんので、よろしくお願いいたします。
こんばんは。
お忙しい中ご返信いただき、ありがとうございます。
お手隙の際で構いませんので、よろしくお願いいたします。
A さん
12月11日 21時13分
Aさん、こんにちは。
改めまして、ご返信します。
無責任なことは言えないので、試しに自分の環境でやってみました。
■HTML
■CSS
この場合、背景の右側方向にははみ出さないと思います。※但しchild内の文字が半角英数字のみの場合に限り（背景ではありませんが）画面からはみ出します。
一方で下側は、文字を下の方にし＆文字数を増やした場合にはみ出しが生じました。今回は、下にはみ出してしまうのをなんとかされたいという事でよろしいでしょうか？
これに関しては、縦の画像が足りなくなってしまえばはみ出るのが必然なため、間接的な対応になるかと思います。
例えばCSSメディアクエリを使い、はみ出す前に親の高さ（＝背景部分）を増やしたり、文字の位置をtop, left等で調整したり等が考えられます。
コードを拝見しているわけでは無いので、的が外れている回答でしたらすみません。よりつっこんだ回答が必要でしたら、コードをご提示いただけると分かることがあるかもしれません。
改めまして、ご返信します。
無責任なことは言えないので、試しに自分の環境でやってみました。
■HTML
<div class="parent">
<div class="child">
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</div>
</div>
<div class="child">
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</div>
</div>
■CSS
.parent {
background: url(path/to/image.png) no-repeat center center;
background-size: cover;
position: relative;
width: 100%;
height: 500px;
}
.child {
position: absolute;
left: 300px;
top: 200px;
}
background: url(path/to/image.png) no-repeat center center;
background-size: cover;
position: relative;
width: 100%;
height: 500px;
}
.child {
position: absolute;
left: 300px;
top: 200px;
}
この場合、背景の右側方向にははみ出さないと思います。※但しchild内の文字が半角英数字のみの場合に限り（背景ではありませんが）画面からはみ出します。
一方で下側は、文字を下の方にし＆文字数を増やした場合にはみ出しが生じました。今回は、下にはみ出してしまうのをなんとかされたいという事でよろしいでしょうか？
これに関しては、縦の画像が足りなくなってしまえばはみ出るのが必然なため、間接的な対応になるかと思います。
例えばCSSメディアクエリを使い、はみ出す前に親の高さ（＝背景部分）を増やしたり、文字の位置をtop, left等で調整したり等が考えられます。
コードを拝見しているわけでは無いので、的が外れている回答でしたらすみません。よりつっこんだ回答が必要でしたら、コードをご提示いただけると分かることがあるかもしれません。
馬場誠 さん
12月12日 11時08分
