画像が重なりません。

前提・実現したいこと

こんばんは。
javascriptでスライドショー機能を取り入れたいと思っています。
カットイン/アウトで切り替える方法はできたのですが、フェードさせる際に
画像が重なってくれません。

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

dreamweaver　CS6 の分割ビューでは、重なっていますが、
ライブビューやブラウザ表示にすると画像が上下に分かれます。

該当のソースコード

HTML、Javascript
1<style type="text/css">
2body {
3	margin-left: 30px;
4	margin-top: 30px;
5	margin-right: 30px;
6	margin-bottom: 30px;
7}
8.dd{
9	text-align:center;
10}
11.gg{
12	display:inline;	
13	position:relative;
14	width:300px;
15	background:#6F6;
16}
17#top{
18	position:absolute;
19	top:0px;
20	left:0px;
21}
22	
23}
24#bottom{
25	position:absolute;
26	top:0px;
27	left:0px;
28}
29</style>
30</head>
31
32<body>
33
34<img ID="tg" src="img/test1.jpg" width="300" height="250"/>
35
36<script type="text/javascript">
37
38var pnum=0;
39
40var slImg=new Array(
41"test1.jpg","test2.jpg.", "test3.jpg");
42
43function slide(){
44	if(pnum==2){
45		pnum=0;
46	}
47	else{
48		pnum++;
49	}
50	document.getElementById("tg").src="img/" + slImg[pnum];
51	setTimeout("slide()",1000);
52}
53slide();
54	 
55
56
57</script>
58
59<div class="dd">
60<p class="gg">
61<img id="bottom" src="img/test2.jpg" width="300" />
62<img id="top" src="img/test1.jpg" width="300" />
63</p>
64</div>
65
66</body>
67</html>
68

試したこと

試したことといいますか、
http://cya.sakura.ne.jp/java/sshow2.htm
上記URLを参考にして、スライドショー機能を取り入れようとしましたが、
初心者のため、丸々コピペではなく、一つずつ順を追って理解していこうとしたところ、
いきなり画像の重ね合わせでつまずきました。
なんとなく、position:absoluteの使い方ではないかと察してはいるのですが、
参考のURLでは、absoluteは片方だけとあったので、最初は、id="top"の方だけ指定していましたがうまくいきませんでした。
また、
https://saruwakakun.com/html-css/basic/relative-absolute-fixed
こちらのURLでは、親要素のpositionをrelativeにするようあったので、そうしましたが、最初のURLでは、その箇所が見当たりません。
質問の的がわかりにくくてすみません。
フェードの関数にはまだ至っていませんので、
分割ビューで重なっている画像がライブビューで重ならなくなっている原因、
画像を重ねる際、親要素へのrelative指定の必要性について、ご教授いただけませんでしょうか。
よろしくお願いいたします。