내 머리말이 내 하이퍼 링크를 방해하는 이유는 무엇입니까?

Question

<h1>을 추가하려고 할 때마다 어떤 이유로 내 #menu<a>이 다른 위치로 이동되고 있습니다. html과 css에 관해서는 상당히 지식이 있지만이 문제에 대한 해결책을 찾을 수 없습니다. 여기 제 코드가 있습니다. 제발 도와주세요.

HTML :

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS : 행 높이가 문제가 있다면이 궁금

#menubar { 
    width: 100%; 
    background-color: maroon; 
    height: 80px; 
    line-height: 80px; 
} 
#button { 
    color: black; 
    font-size: 4em; 
    text-decoration: none; 
    font-weight: lighter; 
    padding: 0px; 
    vertical-align: middle; 
    float: left; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    vertical-align: middle; 
    font-weight: lighter; 
    font-size: 32px; 
} 

? 하지만 저는이 #menubar 아이들을 수직으로 정렬해야하기 때문에 줄 높이를 그대로 유지하고 싶습니다. PhoneGap을 사용하여 Android 앱을 만들고 있으므로 누구나 도움을받을 수 있다면 많은 도움이 될 것입니다. 미리 감사드립니다.

Answer 1

id - menubar을 상대적으로 설정하고 id의 button 및 menubarheader을 절대로 설정했습니다. 나는 그것이 당신이 찾고 있던 것이라고 믿습니다. 여기에 JSFiddle은 다음과 같습니다 >>>CLICK HERE<<<

HTML :

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS :

#menubar, #menubarheader { 
    width: 100%; 
    height: 80px; 
} 
#menubar { 
    min-width: 250px; 
    position: relative; 
    background-color: maroon; 
} 
#button, #menubarheader { 
    position: absolute; 
    vertical-align: middle; 
    font-weight: lighter; 
} 
#button { 
    padding: 0px; 
    text-decoration: none; 
    font-size: 4em; 
    color: black; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    font-size: 32px; 
}