div 요소를 다른 하나 위에 배치하십시오

Question

아래 그림에서 driftwood/bomb 이미지를 직접 위에 놓고 싶습니다. 따라서 나는이 두 공간 사이의 "공간"을 제거/축소하려고합니다. div. 그러나 "폭탄"이 높이에서 사진을 크게 만드는 것을 볼 수 있기 때문에 간격은 마크 업 자체로 인해 발생하지 않습니다.

나는 "헤더"(그래서 탐색의 갈색 상단 그냥 헤더 바닥 아래)에있는 탐색 모음을 배치하고 싶은, 그래서 격차가 사라

. 이러한 이미지는 겹칠 수 있습니다.

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; 
    }