要素の重なる順番の指定(HTML/CSS)

HTML/CSS

ヘッダーを固定させようと、position: fixed; を指定したら固定はされたのですが、ヘッダーの下にある要素がヘッダーの上に重なってしまうようになってしまいました。(下にスクロールした際、ヘッダーが下にある要素に覆われてしまう。)

 

それを解決するために、ヘッダーと下にある要素それぞれに z-index というcssのプロパティを与えました。

すると、z-indexに指定した数字が小さい方が下になってくれます！

 

 

header {
background-color: blue;
height: 180px;
z-index: 2;
position: fixed;
width: 100%;
top: 0;
left: 0;
}

.contents {
background-color: yellow;
height: 100%;
width: 950px;
z-index: 1;
/* float: left; */
position: absolute;
top: 180px;
}

 

HTMLは以下のもの。

<html><head>
<meta charset="utf-8">
<title>確認試験</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="header-left"></div>
</header>
<div class="contents">
<div class="left-content"></div>
<div class="contents-main">
<footer class="footer"></footer>
</div>
</div>
</body></html>

 

これで無事、解決しました。