css - 重叠的div会占用大量不必要的空间

我有两个元素，如下所示。
我希望我的FrontPageMenu重叠，所以它在重叠我的地图上，所以它作为一个菜单工作。你可以看到它在：http://mcoroklo.dk/工作。
为了使这个工作，我使用了position:relative；top:-550px；，但是，这在我的图像下面提供了550px的空白；-）
基本上，我想删除这个空白，而一切工作。
一个解决方案可能是定位：relative；top:550px；其他内容，但我甚至不想评论这有多愚蠢；-）
希望你们能笑着说“放进这房子！”.
完整地图-一种使用CSS的图像地图：

    <dl id="fullMap">
    <dd>

        <a id="bamselandMap" href="Bamseland.aspx" title="Bamser"></a>
    </dd>
    <dd>
        <a id="andedammenMap" href="Badeaender.aspx" title="Badeænder"></a>
    </dd>
<dd>
        <a id="boblerMap" href="Saebebobler.aspx" title="Sæbebobler"></a>
    </dd>

</dl>

FrontPage菜单div.在HTML中如下：

<div class="FrontPageMenu">


<h3 style="color:white;">Legetøj</h3>

<hr />
    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_0" title="Besøg Badeænder universet ved at klikke her" href="legetoej/badeaender" style="color:White;">Badeænder</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_0" title="Besøg Designer badeænder universet ved at klikke her" href="legetoej/badeaender/designer-badeaender" style="color:DarkGray;">Designer badeænder</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_1" title="Besøg Store badeænder universet ved at klikke her" href="legetoej/badeaender/store-badeaender" style="color:DarkGray;">Store badeænder</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_1" title="Besøg Bamser universet ved at klikke her" href="legetoej/bamser" style="color:White;">Bamser</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_0" title="Besøg Mikroovns bamser universet ved at klikke her" href="legetoej/bamser/mikroovns-bamser" style="color:DarkGray;">Mikroovns bamser</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_1" title="Besøg Musik bamser universet ved at klikke her" href="legetoej/bamser/musik-bamser" style="color:DarkGray;">Musik bamser</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_2" title="Besøg Sæbeboble udstyr universet ved at klikke her" href="legetoej/saebeboble-udstyr" style="color:White;">Sæbeboble udstyr</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_0" title="Besøg Sæbeboble pinde universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-pinde" style="color:DarkGray;">Sæbeboble pinde</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_1" title="Besøg Sæbeboble vand universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-vand" style="color:DarkGray;">Sæbeboble vand</a></span>

FrontPage菜单CSS类：

.FrontPageMenu
{
    position:relative;
    top:-550px;
    background-color:Gray;
    padding:10px;
    width:200px;
    background:url('http://www.mulius.com/Media/Site/FrontPageMenuBackground.png') repeat scroll 0 0 transparent;
    min-height:400px;

}

最佳答案

使地图包含元素position: relative;并使地图position: absolute;。然后，使用top: -550px，而不是使用left: 20px; top: 20px;。在演示CSS中，我使用了!important覆盖基本样式表。你在课堂上不需要这个。使包含元素的位置相对使子元素的绝对位置与该元素相关（而不是页面）。
当您（或其他人）稍后查看代码时，使用负位置和边距来更正差异是很难理解和调试的。使用float可能会导致页面上其他地方的布局问题，而且不太直观。你真正想说的是，“我希望这个菜单在我地图的左上角”。因为地图和菜单是同级的，所以这是绝对定位。
演示：http://jsfiddle.net/ThinkingStiff/M6Jc9/

.NoColumnContent {
    position: relative;
}

.FrontPageMenu {
    position: absolute !important;
    top: 20px !important;
    left: 20px;
}