重疊的div給出了很多不需要的空間

我有一個情況，我有兩個元素，如下所示，在這篇文章的底部。重疊的div給出了很多不需要的空間

我希望我的FrontPageMenu重疊，所以它重疊在我的地圖上，所以它可以用作菜單。你可以看到它在：http://mcoroklo.dk/。

爲了完成這項工作，我使用了position：relative;頂部：-550px; ，但是，這給我的圖像下方550px的空白空間;-)

基本上我想刪除這個空白，而一切正常。

一個解決方案可能是定位：相對;頂：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菜單股利。在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; 

}

來源

2012-01-11 Lars Holdgaard

需要巨大的負面位置應該是自己是不是制定了正確的一面紅旗。但你可能已經知道這一點，這就是你來這裏的原因。 ThinkingStiff的答案在正確的軌道上，但我更喜歡「漂浮」;一旦你瞭解他們的基本知識，就不會反直覺了。 – Sparky 2012-01-11 21:08:17

製作地圖的包含元素，position: relative;並製作地圖position: absolute;。然後，使用left: 20px; top: 20px;而不是使用top: -550px。在演示CSS中，我使用!important來覆蓋您的基本樣式表。你不需要在你的課堂上。使包含元素的相對位置與子元素的絕對定位（不是頁面）相關。

當您（或其他人）稍後查看您的代碼時，使用負位置和邊距來糾正差異很難理解和調試。使用浮點數可能會導致頁面上其他地方的佈局問題，並不那麼直觀。你真正說的是，「我希望這個菜單位於我的地圖的左上角」。由於地圖和菜單是兄弟姐妹，這是絕對定位。

演示：http://jsfiddle.net/ThinkingStiff/M6Jc9/

.NoColumnContent { 
    position: relative;  
} 

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

來源

2012-01-11 20:39:47 ThinkingStiff

我期待我的問題的答案，但這樣的事情呢？努...非常感謝 - 令人難以置信的答案！ – 2012-01-11 22:12:41

我會建議用浮子和邊距和填充，DIV努力，而不是使用相對位置。但我覺得你的痛苦....

來源

2012-01-11 20:32:26

我同意你的評論，但它確實是一個很弱的答案......非常接近於沒有成爲答案。通常，您實際上會提供解決問題的代碼。 – Sparky 2012-01-11 21:03:49

添加margin-bottom: -500px;到類FrontPageMenu。

你應該知道，當一個元素有position: relative時，它仍然會佔用它通常沒有移動的空間。在這種情況下，您可以通過使用負邊距來解決此問題。

來源

2012-01-11 20:34:54

重疊的div給出了很多不需要的空間

回答

相關問題