DIV定位与位置:相对

Question

我有一个页面布局,其中,I必须设置一个div相对和顶部的位置:-30px的DIV相和顶部定位:-30 exactely.

但是下面的DIV然后在顶部30px距离.有没有办法解决这个问题.

Answer 1

position: relative不会做我认为你认为它做的事情.这意味着其中绝对定位的元素相对于相对div而不是页面定位.例如:

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

同

#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将位于下部div的顶部,而不是页面顶部.content将从页面顶部150像素.c2由于负顶部将高于它.header将位于页面顶部.