スクロールすると下のエリアがヘッダーにかぶさる

エリアの動き
-スクロールすると下のエリアがヘッダーにかぶさる-

See the Pen 6-6 スクロールすると下のエリアがヘッダーにかぶさる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

CSSを使い、headerの擬似要素であるafterに表示を固定するposition:fixed; と、エリアの重なる順番を一番下にする z-index:-1;を指定する。
下のかぶさるエリアにはposition:relative; とz-index:1;を指定する。

※この方法の他に、エリアにbackground-attachment:fixed;を指定する簡単な方法もありますが、スマートフォンのブラウザによっては動きが実現しないことがあります。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-6.css">
</head>

body内にHTMLを記載します。

<header id="header">
<h1>Scroll me</h1>
</header>
<div id="container">
<p>このエリアがスクロールすると上にかぶさります</p> 
<!--/container--></div>

自作のCSS内の書き方

#header{
	/*headerを全画面で見せる*/
	width:100%;
	height: 100vh;
	position: relative;
} 

#header:before{
	/*headerの疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("../img/pict.jpg") no-repeat center;/*背景画像設定※オリジナル画像を設定してください*/
	background-size:cover;
}

#container{
	/*下のかぶさるエリアの指定*/
	position: relative;
	z-index:1;
	/*以下はレイアウトのための記述。削除可能*/
	background:#fff;
	padding:600px 0;
}