position relative absoluteのレスポンシブ縮小時のデザイン崩れについて

air bnbの模写コーディングをしてる初心者です。
クラスで囲ってあるまとめたものをposition: absolute;にして（ここではintroクラスにします）トップ画像(img src)にのせたのですが縮小した時にくずれてしまいます。どうすれば良いですか？回答おまちしております。```HTMLここに言語を入力
コード

  <div class="top-img mb-2">
    <img src="https://osaka.j-hoppers.com/img/jh/osaka/main.jpg"  alt="">
  </div>
  <div class="intro">
    <h1 class="font-weight-bold mb-3">Airbnbホストになって、暮らしをレベルアップ</h1>
    <p  class="font-weight-bold">どれくらいの収入が見込めるかチェック</p>
    <div class="cp_iptxt">
      <input type="text" placeholder="ロケーション">
    </div>
    <div class="d-flex">
      <div class="cp_ipselect cp_sl01">
        <select required>
          <option value="" hidden>まるまる貸切</option>
          <option value="1">まるまる貸切</option>
          <option value="2">個室</option>
          <option value="3">シェアルーム</option>
        </select>
        </div>
      <div class="cp_ipselect cp_sl01 guest">
        <select required>
          <option value="" hidden>ゲスト4人</option>
          <option value="1">ゲスト１人</option>
          <option value="2">ゲスト2人</option>
          <option value="3">ゲスト3人</option>
          <option value="4">ゲスト4人</option>
          <option value="5">ゲスト5人</option>
          <option value="6">ゲスト6人</option>
          <option value="7">ゲスト7人</option>
          <option value="8">ゲスト8人</option>
          <option value="9">ゲスト9人</option>
          <option value="10">ゲスト10人</option>
          <option value="11">ゲスト11人</option>
          <option value="12">ゲスト12人</option>
          <option value="13">ゲスト13人</option>
          <option value="14">ゲスト14人</option>
          <option value="15">ゲスト15人</option>
          <option value="16">ゲスト16人</option>
        </select>
        </div>
    </div>
      <h1 class="font-weight-bold mt-4">￥76,857</h1>
      <p>月あたり</p>
      <button type="button" class="btn btn-danger intro-btn py-2 font-weight-bold">はじめる</button>
    </div>
  </div>

```CSS
コード
```.top-wrapper {
	position: relative;
}

.top-img {
	width: 100%; 
	width: 1618px;
	margin: 0 auto;
}

.intro {
	background-color: white;
	width: 470px;
	padding: 2em;
	border-radius: 6px;
	position: absolute;
	right: 200px;
	top: 100px;
}
	
.intro h1{
	line-height: 1;
	display: inline-block;
}

.intro p {
	font-size: 13.5px;
	display: inline-block;
}

.intro-btn {
	width: 100%;
	height: 50px;
}
	
.cp_iptxt {
	position: relative;
	width: 100%;
  margin-bottom: 8px;
}
 
.cp_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em;
	border: 1px solid rgb(212, 223, 223);
	border-radius: 4px;
	outline: none;
}

	
.cp_iptxt input[type=text]:focus {
	border-color: #da3c41;
}

.cp_ipselect {
  overflow: hidden;
	width: 58%;
	/* margin: 2em auto; */
	
}
.cp_ipselect select {
  width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
  display: none;
}
.cp_ipselect.cp_sl01 {
  position: relative;
	border: 1px solid rgb(212, 223, 223);
	border-radius: 4px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
  position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
  padding: 0.7em 38px 0.7em 8px;
	color: #666666;
}


.cp_ipselect:visited {
	border-color: #da3c41;
}

.guest {
	width: 38.5%;
	margin-left: 3.5%;
}```ここに言語を入力
コード

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

回答1件

ベストアンサー

最終的にどのようなレイアウトがご希望なのか不明確ですが、
レスポンシブレイアウトにするなら、position: absolute;で位置決めするのは得策ではないです。

また、背景画像の上にintroクラスを載せたいなら、CSSのbackgroundに背景画像を設定するのが楽だし、自由度が高いです。

下記はintroクラスを中央寄せして、背景に画像を表示させる場合のコード例です。

html
1<div class="top-img mb-2">  
2  <div class="intro">  
3    <h1 class="font-weight-bold mb-3">Airbnbホストになって、暮らしをレベルアップ</h1>  
4    <p  class="font-weight-bold">どれくらいの収入が見込めるかチェック</p>  
5    <div class="cp_iptxt">  
6      <input type="text" placeholder="ロケーション">  
7    </div>  
8    <div class="d-flex">  
9      <div class="cp_ipselect cp_sl01">  
10        <select required>  
11          <option value="" hidden>まるまる貸切</option>  
12          <option value="1">まるまる貸切</option>  
13          <option value="2">個室</option>  
14          <option value="3">シェアルーム</option>  
15        </select>  
16      </div>  
17      <div class="cp_ipselect cp_sl01 guest">  
18        <select required>  
19          <option value="" hidden>ゲスト4人</option>  
20          <option value="1">ゲスト１人</option>  
21          <option value="2">ゲスト2人</option>  
22          <option value="3">ゲスト3人</option>  
23          <option value="4">ゲスト4人</option>  
24          <option value="5">ゲスト5人</option>  
25          <option value="6">ゲスト6人</option>  
26          <option value="7">ゲスト7人</option>  
27          <option value="8">ゲスト8人</option>  
28          <option value="9">ゲスト9人</option>  
29          <option value="10">ゲスト10人</option>  
30          <option value="11">ゲスト11人</option>  
31          <option value="12">ゲスト12人</option>  
32          <option value="13">ゲスト13人</option>  
33          <option value="14">ゲスト14人</option>  
34          <option value="15">ゲスト15人</option>  
35          <option value="16">ゲスト16人</option>  
36        </select>  
37      </div>  
38    </div>  
39    <h1 class="font-weight-bold mt-4">￥76,857</h1>  
40    <p>月あたり</p>  
41    <button type="button" class="btn btn-danger intro-btn py-2 font-weight-bold">はじめる</button>  
42  </div>  
43</div>

css
1.top-img {
2  background: no-repeat center/cover url("https://osaka.j-hoppers.com/img/jh/osaka/main.jpg");
3  padding: 100px 0;  
4}
5.intro {  
6background-color: white;  
7width: 470px;  
8padding: 2em;  
9border-radius: 6px;  
10margin: 0 auto;   
11}  
12
13.intro h1{  
14line-height: 1;  
15display: inline-block;  
16}  
17
18.intro p {  
19font-size: 13.5px;  
20display: inline-block;  
21}  
22
23.intro-btn {  
24width: 100%;  
25height: 50px;  
26}  
27
28.cp_iptxt {  
29position: relative;  
30width: 100%;  
31margin-bottom: 8px;  
32}  
33
34.cp_iptxt input[type=text] {  
35font: 15px/24px sans-serif;  
36box-sizing: border-box;  
37width: 100%;  
38padding: 0.7em;  
39border: 1px solid rgb(212, 223, 223);  
40border-radius: 4px;  
41outline: none;  
42}  
43
44
45.cp_iptxt input[type=text]:focus {  
46border-color: #da3c41;  
47}  
48
49.cp_ipselect {  
50overflow: hidden;  
51width: 58%;  
52/* margin: 2em auto; */  
53
54}  
55.cp_ipselect select {  
56width: 100%;  
57padding-right: 1em;  
58cursor: pointer;  
59text-indent: 0.01px;  
60text-overflow: ellipsis;  
61border: none;  
62outline: none;  
63background: transparent;  
64background-image: none;  
65box-shadow: none;  
66-webkit-appearance: none;  
67appearance: none;  
68}  
69.cp_ipselect select::-ms-expand {  
70display: none;  
71}  
72.cp_ipselect.cp_sl01 {  
73position: relative;  
74border: 1px solid rgb(212, 223, 223);  
75border-radius: 4px;  
76background: #ffffff;  
77}  
78.cp_ipselect.cp_sl01::before {  
79position: absolute;  
80top: 0.8em;  
81right: 0.9em;  
82width: 0;  
83height: 0;  
84padding: 0;  
85content: '';  
86border-left: 6px solid transparent;  
87border-right: 6px solid transparent;  
88border-top: 6px solid #666666;  
89pointer-events: none;  
90}  
91.cp_ipselect.cp_sl01 select {  
92padding: 0.7em 38px 0.7em 8px;  
93color: #666666;  
94}  
95
96
97.cp_ipselect:visited {  
98border-color: #da3c41;  
99}  
100
101.guest {  
102width: 38.5%;  
103margin-left: 3.5%;  
104}