메뉴바 css질문드립니다.
본문
<div class="header">
<div class="header_bar"></div>
<div class="menu"></div>
</div>
<style>
.header { width:100%; position:fixed; left:0; right:0; top:0; }
.header_bar { }
.menu { position:absolute; top:0; right:0; }
</style>
대략 위와 같은 레이아웃과 css입니다.
화면 스크롤 위치에 상관 없이 메뉴 버튼을 클릭하면
이미지와 같이 가장 상단부터 보여지고,
메뉴가 떠있는 상태에서 스크롤을 내리면
메뉴 아래 잘리는 부분을 볼 수 있게 메뉴가 같이 스크롤이 되었으면 좋겠습니다.
menu를 지금처럼 header 안에 같이 넣으면 어디에서 메뉴를 눌러도 가장 상단부터 나오지만
fixed 되어 스크롤이 불가하고
header 밖에 넣으면 header fixed와 menu스크롤이 되지만
화면 가장 하단에서 메뉴를 클릭하면 menu도 하단이 보여 다시 맨 위로 올려야 하더라구요..
html부터 잘못짠건지.. 아님 css를 잘못한건지.. ㅠ
방법이 있을까요..?
답변 2
.menu { position:absolute; top:0; right:0;bottom:0; height:100%; overflow-y:auto;}
원하시는 걸 하려면 가장 상위 div를 fixed 하고
그 안에 메뉴를 넣으셔서 스크롤이 가능하게 하셔야 할 것 같습니다.
z-index로 가장 상위 div를 최상단으로 하시구요
header는 fixed이고, 그 안에 들어가면 스크롤이 안되서
그 방법을 찾고있습니다.
가장 상위 div라는게 위 예시의 header가 맞을까요?
그럼 css가 잘못되어있는걸까요?
