背景がヘッダーの上に来てしまいます

前提・実現したいこと

現在素人ながらHTMLとCSSのコーディングを勉強し始め、
コーポレートサイトを見よう見まねで参考書を見ながらも制作し始めたものの最初の段階で躓いてしまっております。
本来であればはヘッダーを固定しヘッダーに重ならないようにヘッダーの真下に背景がくるようにレイアウトがしたいです。
初歩的な質問で恐縮ですが、どなたかご教示いただければ幸いです。
宜しくお願いいたします。

発生している問題・エラーメッセージ

headerを固定したつもりがbackgraund-imageが上に来てしまいます

該当のソースコード

ソースコード
HTML

	<header class="page-header">
		<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="会社ロゴ"></a></h1>
		<nav>
			<div class="main-nav">
				<div class="company">
					<a href="./company.html">
						<img src="images/global/globalNavi_1-hov.jpg" alt="会社情報">
						<img src="images/global/globalNavi_1.jpg" alt="COMPANY">
					</a>
				</div>
				<div class="business">
					<a href="bisiness.html">
						<img src="images/global/globalNavi_2-hov.jpg" alt="事業内容">
						<img src="images/global/globalNavi_2.jpg" alt="BUSINESS">
					</a>
				</div>
				<div class="recruit">
					<a href="recruit.html">
						<img src="images/global/globalNavi_3-hov.jpg" alt="採用情報">
						<img src="images/global/globalNavi_3.jpg" alt="RECRUIT">
					</a>
				</div>
				<div class="contact">
					<a href="contact.html">
						<img src="images/global/globalNavi_4-hov.jpg" alt="お問い合わせ">
						<img src="images/global/globalNavi_4.jpg" alt="CONTACT">
					</a>
				</div>
			</div>
		</nav>
	</header>
	<!-- /Global Header -->
	<!-- Panel -->
		<div id="panelArea">
			<div class="panelBase">
				<div class="base">
					<h2 class="pageTitle">採用情報</h2>
					<div class="copy"><p>採用情報を掲載しています。</p></div>
				</div>
			</div>
		</div>
	<!-- /Panel -->

	<div class="main-visual">
				<img " src="images/recruit-main-title.png" alt="recruit-main-title">				
	</div>

CSS
/* HEADER
--------------------------------------- */
.page-header {
height:115px;
width:100%;
background-color:white;
position:fixed;
top:0;
}
.logo {
width: 118px;
margin-top: 8.8px;
margin-left: 10px;
position:fixed;
}
.main-nav {
display: flex;
margin-top: 60px;
margin-left: 150px;
margin-right: 30px;
list-style: none;
}

/* MENU
--------------------------------------- */
.company {
position: relative;
width: 175px;
height: 53px;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.company img {
position: absolute;
width: 100%;
display: block;
transition: .1s ease-in-out;
}
.company:hover img:nth-of-type(2) {
opacity: 0 ;
}
.business {
position: relative;
width: 175px;
height: 53px;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.business img {
position: absolute;
width: 100%;
display: block;
transition: .1s ease-in-out;
}
.business:hover img:nth-of-type(2) {
opacity: 0 ;
}
.recruit {
position: relative;
width: 175px;
height: 53px;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.recruit img {
position: absolute;
width: 100%;
display: block;
transition: .1s ease-in-out;
}
.recruit:hover img:nth-of-type(2) {
opacity: 0 ;
}
.contact {
position: relative;
width: 175px;
height: 53px;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.contact img {
position: absolute;
width: 100%;
display: block;
transition: .1s ease-in-out;
}
.contact:hover img:nth-of-type(2) {
opacity: 0 ;
}

.page-header {
display: flex;
justify-content: space-between;
}

/* PANEL
--------------------------------------- */

#panelArea {
position: relative;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat
}
#panelArea .panelBase .base {
height: 500px;
width: 980px;
margin: 0 auto
}
#panelArea .panelBase .base .pageTitle {
position: absolute;
top: 37%;
left: 0;
width: 100%;
text-align: center;
font-size: 40px;
letter-spacing: 4px;
color: #fff
}
#panelArea .panelBase .base .copy {
position: absolute;
top: 51%;
left: 0;
display: block;
width: 100%;
margin-top: 10px;
text-align: center
}
#panelArea .panelBase .base .copy p {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
color: #fff;
font-size: 14px;
line-height: 1.5
}
#panelArea .panelBase .base .copy p .hint {
display: block;
margin-top: 10px;
font-size: 11px
}

#panelArea {
background-image: url("../../images/panelPhoto_recruit.jpg")
}

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

.page-header を z-index で前面に移動させる。
.page-header の高さ分(115px)、#panelArea を margin-top で下に移動させる。

css
1.page-header {
2  height:115px;
3  width:100%;
4  background-color:white;
5  position:fixed;
6  top:0;
7  z-index: 1; /* 追加 */
8}
9
10
11#panelArea {
12  background-image: url(../../images/panelPhoto_recruit.jpg);
13  margin-top: 115px; /* 追加 */
14}