Расположите элемент div над другим

Question

На картинке ниже я хочу разместить изображение коряги / бомбы над изображением прямо над ним; следовательно, я хочу удалить / свернуть «пробел» между этими двумя div s. Однако этот разрыв не вызван самой разметкой, потому что, как вы видите, «бомба» увеличивает изображение на высоте.

Я бы хотел расположить панель навигации на «заголовке» (чтобы коричневая верхняя часть навигации находилась чуть ниже нижней части заголовка), чтобы пропасть исчезла. Эти изображения предназначены для перекрытия.

Я предполагаю, что это можно сделать с помощью CSS. Но как? Какое бы решение ни работало для кроссбраузерности.

HTML:

<header></header>
<nav></nav>

CSS:

header {
    width: 980px;
    height: 327px;
    background: url(../images/header.png);
}

nav {
    width: 980px;
    height: 180px;
    background: url(../images/menu.png);
}

Answer 1

Возможно отрицательная маржа?

header {
    width: 980px;
    height: 327px;
    background: url(../images/header.png);
}

nav {
    width: 980px;
    height: 180px;
    background: url(../images/menu.png);
    margin: -90px auto 0;
}

http://jsfiddle.net/NmUfT/

Answer 2

Относительное расположение может исправить это для вас:

nav {
  position: relative;
  top: -20px;
}

Answer 3

поместите div внутри div заголовка.

nav {
   position: relative;
   bottom: -30px;
    }

Answer 4

Верхний край с отрицательным значением - это действительно то, что вы ищете.Если навигация исчезнет под заголовком, вы должны изменить z-индекс навигации.Попробуйте разные числа: 100, 1000, 10000 и т. Д.