CSS: Comment faire un bloc div * not * prend de la place dans son conteneur parent

Si j'ai 2 div tags:

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

Je veux que le contenu de <div id="childDiv"> de chevaucher le contenu <!-- parent div html -->.

Raison (dans le cas où cela ressemble à une mauvaise conception de code à quelqu'un):
J'ai besoin d'un hack solution de contournement dans google sites, je ne peux pas ajouter du code personnalisé dans la barre latérale de navigation, dans les principales html de l'espace, je veux flotter un div qui prend pas de place et relativement position sur la barre latérale pour contourner la contrainte de la limitation.

Je peux tout faire sauf arrêter la childDiv de prendre de l'espace dans métisser principal-page conteneur.

source d'informationauteur David Parks

  1. 12

    Vous pouvez lui donner une position absolue, et de la parcourir avec des marges.

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

    Comment un simple

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

    Mais vous voudrez probablement pour avoir une couleur de fond, hm? Hm.

  3. 3

    Vous devez prendre le childblock de l'écoulement. La meilleure façon de le faire est position: absolute sur l'enfant div et position: relative sur le parent div.

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

    Si vous avez besoin de changer le contenu ou le chevauchement des trucs qui est "en dehors" de la barre latérale, vous pouvez utiliser des marges négatives pour augmenter la largeur de la childDiv ou le déplacer vers le haut (pour couvercle de remplissage ou de marges, vous ne pouvez pas remplacer).

    Si vous avez besoin de faire le #childDiv couvrir l'ensemble de la #parentDiv, vous pouvez utiliser un peu de JavaScript pour définir un min-height sur childDiv, puis ajouter une couleur d'arrière-plan ou quelque chose pour couvrir tout le contenu.

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