상대방을 따라 절대 div 위치 지정

Question

상대 객체 옆에 절대 객체를 배치하려고합니다. 초기 개체는 상대 div가 다음 줄로 줄 이도록합니다.

타이틀이 새로운 "라인"으로 이동하도록 강요하는 것을 제외하고는 모든 것이 정상적으로 작동합니다. #logo div를 position:absolute으로 변경하면 위치 확인 문제를 해결할 수 있지만 로고가 제대로 작동하지 않습니다.

편집 : http://vaer.ca/warm-forest-8234/ 다음

내 HTML입니다 : 여기에 라이브 데모의

#container { 
    width: 980px; 
    margin: 0 auto; 
    position: relative; 
    } 

#header { 
    height: 75px; 
    text-align: right; 
    position: relative; 
    } 

#header h2 { 
    font-size: 2.5em; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    padding-top: 15px; 
    } 

#header a { 
    text-decoration: none; 
    color: #000000; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
    } 

#header a:hover { 
    color: #7acfdd; 
    } 

#logo { 
    position: relative; 
    display: block; 
    margin-top: 10px; 
    margin-left: 10px; 
    background: url('../img/logo.png') no-repeat; 
    width: 60px; 
    height: 60px; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
    } 

#logo:hover { 
    position: relative; 
    background: url('../img/logo-hover.png') no-repeat; 
} 

Answer 1

을 전체 공간을 차지할 요소는 <a>입니다. 개발자 도구를 사용하여보십시오. 다음과 같은 방법으로 모든 것을 고칠 수 있습니다. 더 의미 론적으로 만들 수 있습니다.

#logo{ 
display:inline-block; 
} 
#header{ 
display:inline-block; 
float:right 
} 

이러한 변경으로 원하는 결과를 얻을 수 있습니다.

Answer 2

시도 :

#logo { 
    float: left; 
} 

Answer 3

여기

<div id="container"> 

     <a href="index.html" id="logo"></a> 

     <div id="header"> 

      <h2><a href="index.html">Collectif</a></h2> 

     </div> 

     <div id="nav"> 
      <ul> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Work</a></li> 
      </ul> 
     </div> 

그리고 내 CSS입니다 나는 말할 것이다 :

#logo { 
    float: left; 
    position: relative; 
} 

#header { 
    height: 75px; 
    text-align: right; 
    position: relative; 
    clear:both; 
} 

float를 사용하면 좋습니다. 왼쪽; 및 위치 : 상대적; (난 당신이 위치 사용할 때 때문에 다른 위에 사업부를 떠해야 할 때 난 항상 그것을 사용하고 있습니다 : 상대를, 당신은 Z- 인덱스 적용 할 수 있습니다) 당신은 display:block 힘으로 당신에게 #logo 링크를 설정 한