z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ああああ</title>
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
div#aaa {
z-index: 2;
position:absolute;
width: 300px;
}
div#bbb {
z-index: 1;
position:absolute;
width: 300px;
}
</style>
</head>
<body>
<h1>あああ</h1>
<p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p>
<div id="aaa" style="visibility:visible">
<h2>ううう</h2>
<p>うううううううう<br />
うううううううう</p>
</div>
<div id="bbb" style="visibility:hidden">
<h2>えええ</h2>
<p>えええええええええ<br />
えええええええええ<br />
えええええええええ<br />
えええええええええ<br />
えええええええええ</p>
</div>
<p>いいいいいいいいい<br />
いいいいいいいいい</p>
</body>
</html>
切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。
これを表示させる方法をご存じでしたら教えてください。