position:fixed;で背景を作りたい

position:absolute;のものを背景を白にして、position:fixed;の状態のように動かしたいです。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="test.css">
7</head>
8<div class="header-back">
9  <div class="header-wrapper">
10    <div class="header">
11      <div class="header-logo">
12        <img src="isaralogo.png" align="bottom">
13        <p>バンコクのノマドエンジニア育成講座</p>
14      </div>
15
16      <div class="contact">
17        <a href="#"><P class="contact-pc">お問い合わせ/資料請求はこちら</P></a>
18      </div>
19    </div>
20  </div>
21  </div>
22</body>
23</html>
24
25```css
26```ここに言語を入力
27.header-back{
28  height: 500px;
29  background-color:gray;
30}
31.header-wrapper{
32  width:100%;
33}
34.header{
35  background-color: white;
36  position:fixed;
37  width:100%;
38  padding: 13px 0;
39  display: flex;
40  justify-content:space-between;
41  z-index: 100;
42}
43.header-logo{
44  position: absolute;
45  left: 0;
46  display:flex;
47  z-index: 10;
48  background-color:white;
49}
50.header-logo img{
51  width: 150px;
52  height:40px;
53  vertical-align: middle;
54}
55.header-logo p{
56  display:block;
57  margin:0;
58  position:relative;
59  }
60  .contact{
61  background-color:#D84940;
62  border-radius: 30px;
63  position: absolute;
64  right: 20px;
65  z-index: 10; 
66  text-decoration: none;
67}
68.contact a p{
69  color:white;
70  padding:7px 30px;
71  margin:0;
72 }

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

回答2件

.headerの背景色が広がらないのをどうにかしたい、という質問なのかな、と読みました。
違ったらご指摘ください。

.headerの内容物が全て絶対配置されて内容物から外れているので、高さを失っているのが原因です。
なので、position:absoluteを削除するのが一番わかりやすい解決方法です。

css
1.header-logo {
2    /* position: absolute; */
3    position: relative;
4    left: 0;
5    display: flex;
6    z-index: 10;
7    background-color: white;
8}
9.contact {
10    background-color: #D84940;
11    border-radius: 30px;
12    /* position: absolute; */
13    position: relative;
14    right: 20px;
15    z-index: 10;
16    text-decoration: none;
17}