Отрицательная маржа CSS без перемещения родительского контейнера

Question

Я пытаюсь попасть на эту страницу (http://musicaladvocacy.org/) область, где написано "Дом" (Белый Контейнер в градиенте серого), чтобы подняться на ~ 60 пикселей вверх, но, как вы можете видеть, это делает а также перемещает родительский контейнер вверх. Я просто хочу, чтобы белый ящик двигался вверх, а не все. Так что это должно выглядеть так: http://musicaladvocacy.org/index-margin.jpg

Спасибо за любые идеи!

Answer 1

Вы можете применить position:relative; top:-60px; к элементу, который нужно сдвинуть вверх.

#el {
   position:relative;
   top:-60px;
   z-index: 5;
}

Answer 2

Вы также можете добавить отступ в 1 пиксель к верху родительского элемента и продолжить использовать отрицательные поля.

.width { padding-top: 1px; }
.content { margin-top: -60px; }

Это работает, потому что поля, которые находятся друг против друга, объединяются в одно поле.

Answer 3

То, что вы ищете, это свойства css "position" и "top".

#div-1 {
  position:relative;
  top:-60px;
}

См. Шаг 2 в этого руководства .Многие другие веб-сайты также имеют больше информации об этих свойствах.