なぜ同じ高さで均衡がとれるのか

下記のソースについての疑問です。

html
1<body id="index">
2<div id="Area0">
300000000000000000
4</div>
5<!-- ★ブラウザの大きさと連動するボックス(ファーストビュー) -->
6<div id="Area1">
711111111111111111
8</div>
9<!-- ★セカンドビュー -->
10<div id="Area2">
112222222222222222
12</div>
13<!-- ★サードビュー -->
14<div id="Area3">
153333333333333333
16</div>
17</body>

javascript
1$(function() {
2	//Area1の幅と高さをブラウザの大きさに連動させる。
3	$(window).on('resize', function() {
4    var h = $(window).height();	
5	$('#Area1').css({'height': h, 'margin-top': 70});
6	console.log('高さ:',h);	
7	
8	$('#Area2').css('top', h);
9	$('#Area3').css('top', h);//hに#area2の高さを足すと、何故か足した分だけ余白が生まれる
10	
11	}).trigger('resize');
12	
13	var h = $(window).height();
14	
15});

css
1#Area0 {
2    background: gray;
3	width: 100%;
4	height: 70px;
5	position: fixed;
6	top: 0;
7	left: 0;
8	z-index: 1;
9	opacity: 0.5;
10}
11#Area1 {
12    background: lightpink;
13	width: 100%;
14	position: fixed;
15	opacity:0.7;
16	z-index: 0;
17}
18#Area2 {
19    background: blue;
20	width: 100%;
21	height: 450px;
22	position: relative;
23	/*opacity: 0.3;*/
24}
25#Area3 {
26    background: green;
27	width: 100%;
28	position: relative;
29	height: 450px;
30	/*opacity: 0.3;*/
31}

html要素の#Area2の下部に配置する要素(#Area3)についてなのですが、positionとtopを使って#Area2の直下に配置したいので、#Area1と#Area2の高さを足したものを指定しようと思いました。
しかし、#Area1の高さだけで綺麗に#Area2直下に#Area3を設置できてしまったのです。てっきり#Area1と#Area2の高さを加算したものを指定しないと#Area2に重なるのでは、と思ったのですがなぜ、重ならずに#Area2の直下に#Area3を配置できたのでしょうか。