別の要素の上にdiv要素を配置します

Question

下の図では、ドリフトウッド/ボンベのイメージをイメージの真上に配置したいと考えています。したがって、これら2つの間の「スペース」を削除/折りたたみたいと考えています。divしかし、ギャップは、マークアップ自体に起因するものではありません。なぜなら、「爆弾」が高さで写真を大きくしているのが分かるからです。

Iが「ヘッダ」（SOナビゲーションの褐色の頂部がちょうどヘッダの底部の下である）のナビゲーションバーを配置したいので、ギャップが消失

。これらの画像は重なり合うようになっています。

これは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

負の値を持つトップマージンはあなたが求めるものを確かです。ナビゲーションがヘッダーの下に消える場合は、ナビゲーションのZ-インデックスを変更する必要があります。別の番号を試してください：100,1000,10000など

Answer 4

divをヘッダーdivに入れます。

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