Search code examples
csshtmlpositioningcss-position

CSS: How to make a div block *not* take space in its parent container

If I have 2 div tags:

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

I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.

Reason (in case this looks like bad code design to anyone): I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.

I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.

Solution

  • You can give it a position absolute, and navigate it with margins.

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