Javascript-форум - Яндекс карта и наложение объектов

Вопрос в первую очередь к тем, кто работал с яндекс картами, но может и просто знатоки JS подскажут.
Есть html-страница, всю рабочую область которой занимает карта. Над картой должно быть пользовательское меню (рядом со стандартным), при определённых действиях карта закрывается тёмным фоном, над которым выводятся другие блоки.
Казалось бы всё просто.
Но не тут то было. После инициализации карта закрывает собой ВСЁ содержимое страницы, независимо от того, как я передвигаю или в каком порядке вставляю блоки в коде
Собственно вопрос - как можно рзместить хоть что-то над картой? (в ихней документации ответа не нашёл).
Привожу для примера простенький код и результат (тёмный фон должен быть над картой, но она его перекрывает)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
		<title>yandex-karta</title>
        <meta http-equiv="Content-Type" content="text/html; charset=cp-1251" />		
		<script src="/vk_api.min.js" type="text/javascript"></script>
       	<script src="http://api-maps.yandex.ru/1.1/index.xml?key=*******"
	type="text/javascript"></script>    	
		<script type="text/javascript">

		window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 8);
			map.addControl(new YMaps.Zoom());								
		}

		</script>                
</HEAD>
<body> 
    <div id="YMapsID" style="position:absolute; left:20px; top:20px; width:400px; height:400px;"></div>
    <div id="fon" style="position:absolute; left:0px; top:0px;"> <!-- этот слой находится "выше" -->
    	<img src="img/33aa17a3.jpg" style="position:absolute; left:0px; top:0px; width:400px; height:400px;">
	</div>
</body>
</HTML>