Make a div appear but not move subsequent elements down

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开发者_如何学Go 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_______|

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

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

Add this to the style for that div

position:absolute;

<div style="Position:Absolute; Z-Index: (HIGH Number to appear ON TOP, Low number to be concealed) >
</div>

Either set the background on b (simple, don't know why you wouldn't), or absolutely position a inside b.

Edit: or, as clairesuzy says, put a after b, in the same container.

See below. You can change the width / height to match the size of your background image.

http://jsfiddle.net/DhS3D/4/

HTML...

<div id="b">
  <div id="a"></div>
  This is some text.
</div>

CSS...

#a {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 30px;
    background-color: #ccc;
}
#b {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100px;
    background-color: #999;     
}

try using position absolute or relative depending on what it is