DIV позиционирование с положением: относительное

Question

У меня есть макет страницы, где я должен установить положение div относительно и top: -30px DIV располагается относительно и сверху: -30 точно.

Но следующий 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 будет в верхней части нижнего элемента, а не в верхней части страницы. content будет 150 пикселей сверху страницы. c2 будет выше его из-за отрицательной вершины. header будет в верхней части страницы.

Answer 2

Сделать это положение: абсолютное; и его родительская позиция: относительная;

Это должно работать:)