DIV positioning with position:relative

I have a page layout, where I have to set开发者_运维知识库 the position of a div relative and top:-30px The DIV is positioned relative and top:-30 exactely.

But the following DIV then 30px distance at the top. Is there a way to fix this problem.

position: relative doesn't do what I think you think it does. It means that absolutely positioned elements within it are positioned relative to the relative div and not to the page. For example:

<div id="header">Header</div>
<div id="content">
  <div id="c1">Content One</div>
  <div id="c2">Content Two</div>
</div>

with

#header { position: absolute; top: 0; left: 0; height: 150px; width: 100%; }
#content { position: relative; margin-top: 150px; height: 500px; }
#c1 { position: absolute; top: 0; left: 0; }
#c2 { position: absolute; top: -50px; left: 0; }

c1 will be at the top of the lower div, not the top of the page. content will be 150 pixels from the top of the page. c2 will be above it due to the negative top. header will be at the top of the page.

Make it position:absolute; and its parent position:relative;

This should work :)