CSS 헤더가 안감이 없습니다.맨 위로 -20px 나머지 메뉴를 사용하여 로고를 표시하려고하지 않음

Question

이미지가 포함 된 헤더 모음과 제목과 메뉴 차량이 포함 된 헤더 모음을 만들려고합니다. 막대는 50px 이후에 표시되며 이미지가 약간 움직여서 래핑 DIV의 상단 위의 위로 가고 50px의 비트를 보여주는 것을 원합니다. 래핑 DIV 및 이미지와 상대적인 위치에 절대 위치를 사용하여 20px까지 이동하면 잘 작동하지만 이렇게 할 때 이렇게 할 때이를 수행하십시오. 다른 요소를 이미지와 함께 인라인으로 옮기는 방법이 있습니까?

여기에서 수행하려고하는 것의 간단한 JSFiddle을 작성했습니다. http://jsfiddle.net/ 67stt /

html :

<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
  <h2>Header</h2>
</div>
<nav class='menu'>
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
</nav>
</div>

.

CSS :

.headerContainer {
  top: 50px;
  background-color: green;
  position: absolute;
  width: 100%;
}

.logoContainer {
  height: 120px;
  width: 120px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: -20px;
}

.title {
  font-style: italic;
  display: inline-block;
  position: relative;
  padding: 0;
}

.menu {
  display: inline-block;
  position: relative;
}

.

이미지의 중간에 줄 제목과 메뉴가 필요합니다 (빨간색 상자).

위치를 사용하여 : 절대적으로 서로 맨 위에 있지만 제목과 메뉴 레이어가 서로 맨 위에있는 맨 위로 이동합니다.

나는 이것을 사용할 수 있고 왼쪽에 메뉴를 왼쪽으로 줄 수 있으므로 제목 옆에 앉아 있지만 페이지 크기가 줄어들면 이미지와 제목 아래로 움직이는 메뉴가 이미지와 제목 아래로 움직이게됩니다. 그런 다음 CSS에서만 수행 할 수있는 경우 해킹의 jQuery 방식을 관리하는 데있어 오히려 오히려 올라 오지 않을 것입니다.

Answer 1

이처럼? http://jsfiddle.net/67stt/1/1//A>

add :

vertical-align: top

.

메뉴 및 제목