Airbnbの模写について

前提・実現したいこと

Airbnbの模写をしています。https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1591182041_YTU3NzBhMWNiMjQ4
背景画像の下に「なぜAirbnbでホスト?」から続けて書きたい。
でも背景の上に表示されてしまいます。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>模写コーティング</title>
6    <link rel="stylesheet" href="./style.css">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
8</head>
9<body>
10    <header>
11        <div class="container">
12            <div class="wrapper">
13                <ul class="nav">
14                    <img src="images/140717newairbnblogo.jpg" >
15                    <li><a href="#">概要</a></li>
16                    <li><a href="#">準備</a></li>
17                    <li><a href="#">安全</a></li>
18                    <li><a href="#">マネープラン</a></li>       
19                </ul>
20            </div>
21        </div>
22    </header>
23        <div class="back-img">
24            <button class="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button>
25            <div class="text-background">
26                <div class="text">
27                    <section>
28                        <h1 class="host">Airbnbホストになって、暮らしをレベルアップ</h1>
29                        <p class="stay">宿泊施設の内容を記述</p>
30                    </section>
31                    <input type="text" class="address" value="大阪" size="35">
32                    <select name="name" class="plan">
33                        <option value="enteir_home">まるまる貸切</option>
34                        <option value="private_room">個室</option>
35                        <option value="share_room">シェアルーム</option>
36                    </select> 
37                    <select name="many-peron" class="person">
38                        <option value="guest1">ゲスト１</option>
39                        <option value="guest2">ゲスト２</option>
40                        <option value="guest3">ゲスト３</option>
41                        
42                    </select>
43                        <button class="btn2" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button>
44                </div>
45            </div>
46        </div>
47        
48div.container {
49    margin-left: -15px;
50}
51/*左上の画像のフォント*/
52img {
53    height: 40px;
54    width: 80px;
55    margin-top: 20px;
56}
57
58
59/*概要とかのところ*/
60li a {
61    margin: -3em 0;
62    padding: 5em 1em;
63    display :block;
64    color:rgba(0, 255, 196, 1);
65}
66/*ボタンのところ*/
67.btn{
68    border-radius: 5px;
69    background-color: green;
70    padding-top: 10px;
71    padding-bottom: 30px;
72    text-align: center;
73    color: white;
74    position: relative;
75    bottom: 60px;
76    float: right;
77    right: 30px;
78  }
79
80.btn2 {
81    margin-top: 30px;
82    margin-bottom: 30px;
83    margin-left: 50px;
84    background-color: green;
85    padding: 20px;
86    text-align: center;
87    color: white;
88    width: 350px;
89    height: 20px;
90    border-radius: 5px;
91    padding-bottom: 30px;
92    padding-top: 10px;
93}
94
95
96/*背景画像のところ*/
97.back-img {
98    width: 100%;
99    background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75');
100    background-size: cover;
101    position: absolute;
102    
103 
104}
105
106.host {
107    font-size: 40px;
108    margin-left: 40px;
109    margin-right: 40px;
110    padding: 10px;
111    font-weight: bold;
112    margin-top: 10px;
113}
114
115.stay {
116    margin-left: 50px;
117    font-weight: bolder;
118    border-style: initial;
119}
120
121.address {
122    margin-left: 50px;
123    margin-bottom: 20px;
124    border-radius: 10pxpx;
125}
126.plan {
127    margin-left: 50px;
128    border: ;
129    width: 40%;
130    height: 50px;
131}
132.person {
133    margin-left: 20px;
134    border: ;
135    width: 30%;
136    height: 50px;
137}
138.text-background {
139    background-color: white;
140    float: right;
141    max-width: 460px;
142    margin:78px 92px
143}
144
145.text-background2 {
146    background-color: white;
147    max-width: 460px;
148    margin:78px 92px
149}



### 試したこと

新たにdivタグを作りclassを指定して書いていこうとしましたが、背景と重なって表示されてしまいます。

m.ts10806

2020/06/09 20:50

コードのマークダウンできていません。下記参考に。 https://teratail.com/questions/238564 >２時間ググりましたが時間をかかれても伝わるものはありません。「投入したキーワード」「参考にした記事URLなど」「試したこと」をセットで記載してください。

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

回答2件

ベストアンサー

position: absoluteで配置された要素の後続要素は、配置された要素がないものとして配置されます。
そこにあるものをないものとして配置しますから、当然に重なります。

解決方法は、position: absoluteをやめることです。

css
1.back-img {
2	width: 100%;
3	background-image: url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75');
4	background-size: cover;
5	/* position: absolute; */
6	display: flow-root; /* 追加 */
7}