Make a div appear but not move subsequent elements down

Question

I need to make a div be visible (for use of it's background) even though it will not contain anything, but not push other elements down.

My layout looks like this:

/----------------a--------------------\
|-------------------------------------|
|________________b____________________|

The one labeled a needs to be visible but it will contain nothing. This is so the background image can make box b look like it has some gloss on the top, and box b will contain the text. However, the text in box b needs to start at the top of box a, not underneath it, which is the default behaviour.

So box a needs to act like it doesn't exist as far as layout goes, but needs to act like it exists for the purposes of background image.

To deomonstrate, this is what it looks like now, the default way:

/-------------------------------------\
|-------------------------------------|
|       there is some text here       |
|_______and more text down here_______|

but I want it to be

/-------------------------------------\
|-------there is some text here-------|
|_______and more text down here_______|

Answer 1

CSS:

#box {
  position: relative; 
  z-index: 1; 
  width: 300px; 
  margin: 100px;
}

#boxa {
  position: absolute; 
  z-index: -1;
  top: -20px; 
  left: -10%; 
  width: 120%; 
  height: 50px; 
  background: #0f0;
}

#boxb {
  background: #eee; 
  height: 200px;
}

HTML:

<div id="box">
 <div id="boxa"></div>  
 <div id="boxb">text goes here</div>
<div>

I think you need to set the original stacking context on a wrapper so both boxes are in the same contest, then you can put box a in box b and negative z-index box a

updated: you don't need to put box in box b once they're both in the same staking context

See working example: here & updated to show boxes don't need to be nested : here

Answer 2

Setting a top and left value combined with position:absolute should remove it from the document flow.