Überlappende Divs geben viel unerwünschter Raum

Question

Ich habe eine Situation, in der ich zwei Elemente habe, die wie folgt im Ende dieses Beitrags sind.

Ich möchte, dass sich mein FrontPagemenu überlappt, sodass sie meine Karte überlappt, sodass sie als Menü funktioniert. Sie können sehen, dass es funktioniert bei: http://mcoroklo.dk/ .

Um diese Arbeit zu machen, habe ich Position verwendet: Relativ; Top: -550px; Aber dies gibt 550px White-Raum unter meinem Bild ;-)

Grundsätzlich möchte ich diesen weißen Raum entfernen, während alles funktioniert.

Eine Lösung könnte darin bestehen, zu positionieren: Relativ; Oben: 550px; Auf den Rest des Inhalts, aber ich möchte nicht einmal kommentieren, wie dumm das ist ;-)

Ich hoffe, ihr könnt das lachen und sagen "In diese Anwesen bringen!".

Vollständige Karte - eine Art Bildkarte mit 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 -Menü Div. In HTML ist es so:

<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 -Menü CSS -Klasse:

.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;

}

Answer 1

Machen Sie das enthaltende Element der Karte, position: relative; und machen Sie die Karte position: absolute;. Dann anstatt zu verwenden top: -550px, verwenden left: 20px; top: 20px;. In der Demo -CSS habe ich verwendet !important Um Ihr Basisstylesheet zu überschreiben. Das werden Sie in Ihren Klassen nicht brauchen. Wenn Sie die Position des enthaltenden Elements relativ machen, bezieht sich die absolute Positionierung des untergeordneten Elements (nicht die Seite).

Die Verwendung negativer Positionen und Margen, um den Unterschied zu korrigieren, ist schwer zu verstehen und zu debuggen, wenn Sie (oder jemand anderes) Ihren Code später betrachten. Die Verwendung von Floats kann zu Layoutproblemen an anderer Stelle auf der Seite führen und ist nicht so intuitiv. Was Sie wirklich sagen, ist: "Ich möchte, dass sich dieses Menü in der oberen linken Ecke meiner Karte befindet." Da die Karte und das Menü Geschwister sind, ist dies eine absolute Positionierung.

Demo: http://jsfiddle.net/thinkingstiff/m6jc9/

.NoColumnContent {
    position: relative;    
}

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

Answer 2

Ich würde empfehlen, mit Div mit Float und Rand und Polsterung zu versuchen und keine relativen Positionen zu verwenden. Aber ich fühle deinen Schmerz ....

Answer 3

Hinzufügen margin-bottom: -500px; an die Klassenfrontpagemenu.

Sie sollten das wissen, wenn ein Element hat position: relative, Es wird immer noch den Raum einnehmen, den es normalerweise haben würde, wenn es nicht bewegt würde. In diesem Fall können Sie dies durch die Verwendung einer negativen Marge lösen.