CSS: Wie ein div-Block machen * nicht * nehmen Platz in seinem übergeordneten Container

Question

Wenn ich 2 div-Tags haben:

<div id="parentDiv"> 
    <div id="childDiv"><!-- other html --></div> 
    <!-- parent div html --> 
</div> 

ich den Inhalt <div id="childDiv"> wollen <!-- parent div html --> den Inhalt zu überlappen.

Grund (falls dies aussieht wie schlechte Code-Design für jedermann): Ich brauche einen Hack Workaround in Google Sites, kann ich keinen benutzerdefinierten Code auf der Seitenleiste nav hinzufügen, nur im Haupt-HTML-Raum, möchte ich float a div, das keinen Platz benötigt und es relativ über die Seitenleiste positioniert, um die erzwungene Begrenzung zu umgehen.

Ich kann alles tun, außer die childDiv davon abzuhalten, Platz in seinem Bastard Main-Page-Container aufzunehmen.

Answer 1

Sie können es eine absolute Position geben und navigieren Sie mit Rändern.

 

    #childDiv { 
     position: absolute; 
     margin-top: -100px; 
     margin-left: -100px; 
    } 

Answer 2

Sie müssen den Childblock aus dem Fluss nehmen. Der beste Weg dies zu tun ist position: absolute auf dem Kind div und position: relative auf dem Elternteil div.

Answer 3

Wie wäre es ein einfaches

#childDiv {height:0; overflow:visible;}

Aber Sie wahrscheinlich wollen, dass es eine Hintergrundfarbe haben, hm? Hm.

Answer 4

#parentDiv { 
    position: relative; 
} 
#childDiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

Wenn Sie den Inhalt herum stoßen müssen, oder Sachen überlappen, die ‚außerhalb‘ des Sidebar ist, können Sie negative Margen verwenden, um die Breite des childDiv zu erhöhen oder nach oben (zur Deckung Padding oder Ränder, die Sie nicht überschreiben können).

Wenn Sie möchten, dass #childDiv das gesamte #parentDiv abdeckt, können Sie ein wenig JavaScript verwenden, um eine Mindesthöhe für childDiv festzulegen und dann einen farbigen Hintergrund oder etwas hinzuzufügen, um den Inhalt abzudecken.

var parentHeight = jQuery('#parentDiv').height(); 
jQuery('#childDiv').css('min-height',parentHeight + 'px');