position:absoluteを使うとかぶってしまいます

上の画像のようにposition: absoluteで白いボックスのところを指定して、下にスクロールするとheaderのposition: fixedのところにかぶってしまいます。
どうしたらいいのでしょうか。

html
1<section id="ooki">
2		<div id="cover">
3		<div id="host">
4		<h3>Airbnbホストになっ<br>て、暮らしをレベルア<br>ップ</h3>
5		<p>どれくらいの収入が見込めるかチェック</p>
6		<p><input type="text" value="東京"></p>
7		<p><select>
8			<option value="1">まるまる貸し切り</option>
9			<option value="2">個室</option>
10			<option value="3">シェアルーム</option>
11　　　　　　</select>
12        </p>
13        <p>
14        	<select>
15        		<option value="1">ゲスト１人</option>
16        		<option value="2">ゲスト２人</option>
17        		<option value="3">ゲスト３</option>
18        		<option value="4">ゲスト４人</option>
19        		<option value="5">ゲスト５人</option>
20        		<option value="6">ゲスト６人</option>
21        		<option value="7">ゲスト７人</option>
22        		<option value="8">ゲスト８人</option>
23        		<option value="9">ゲスト９人</option>
24        		<option value="10">ゲスト１０人</option>
25        		<option value="11">ゲスト１１人</option>
26        		<option value="12">ゲスト１２人</option>
27        		<option value="13">ゲスト１３人</option>
28        		<option value="14">ゲスト１４人</option>
29        		<option value="15">ゲスト１５人</option>
30        		<option value="16">ゲスト１６人</option>
31        	</select>
32        </p>
33        <h3>￥212,590<span>月あたり</span></h3>
34        <button>はじめる</button>
35    </div>
36    </div>
37    </section>

css
1#host{
2	position: absolute;
3	top: 20%;
4    left: 65%;
5    margin:0;
6    padding:0;
7	background: white;
8    border-radius: 1%;
9    width: 500px;
10    text-align: center;
11}
12
13#host h3{
14	font-size: 40px;
15}
16
17#ooki{
18	padding-top: 90px;
19}