Make a div, but don't move subsequent elements down

Question

I need to make the div visible (to use its background), although it will not contain anything, but not push other elements down.

My layout is as follows:

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

One that is marked as a must be visible, but there will be nothing in it. This means that the background image can make window b look like it has some shine on top, and text will be contained in field b . However, the text in field b should begin at the top of window a , and not below it, which is the default behavior.

So, box a should act as if it does not exist as far as the layout goes, but must act as it exists for the purpose of the background image.

For demonstration, this is what it now looks like, by default:

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

but I want him 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> 

It seems to me that you need to set the initial context of the stack on the wrapper so that both fields are in the same competition, then you can put field a in field b and negative index z-index a

updated: you do not need to put a box in field b if they are both in the same context context

See working example: here and updated to show fields no need to insert: here

Answer 2

Add this to the style for this div

 position:absolute; 

Answer 3

Setting the top and left values ​​in combination with position:absolute should remove it from the document stream.

Answer 4

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

Answer 5

Either set the background to b (simple, you don’t know why you will not do this), or absolutely put it inside b.

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

Answer 6

See below. You can change the width / height according to the size of the 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; } 

Answer 7

try using absolute or relative position depending on what it is