페이지상에서 name 지정한곳으로 이동할때 질문있습니다.
본문
<a name="content_mid"></a>
<a href="#top">요약정보</a>
<a href="#content_mid">상세정보</a>
위와같은 방법으로 페이지 이동을 사용했었는데요..
상단 메뉴를 항상 떠있게 변경하니
상세정보를 클릭시 윗부분이 떠있는 부분에 가려져버립니다...
이동되는 영역별로 상단 마진을 많이 주면정상적으로 보여지긴하는데..
그냥 스크롤로 이동시 공백이 너무 많아지는것같구요..
이럴때 팁같은거없을까요?
답변 5
참고해 볼 수 있는 글들입니다.
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
https://markus.oberlehner.net/blog/simple-solution-for-anchor-links-behind-sticky-headers/
https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
감사합니다 좋은정보였습니다~
가려지는 부분은 z-index 부분을 css로 반영하셔서 레이어 위치를 상단이 아닌 아래로 가려지도록 적용하셔야 할듯 싶습니다.
이동을 태그로 바로 하는게 아니라 스크립트를 만드시고 해당 위치의 정보를 가지고 오고 그 정보에 고정된 크기 만큼 더 해주면 될거 같습니다. 스크롤 위치 구하는 방법은 검색을 하시면 어렵지 않게 구하실수 있읏실거 같습니다.
anchor를 href 네이밍이 아닌 함수로 하고 해당위치를 계산해서 +얼마로 상대값으로 계산하시면 될것같습니다.
css 에서
position:relative 영역 그대로 유지 되면서 z-index 를 사용할 수 있습니다
position:absolute 영역 없어지고 그자리에서 띄워지면서 z-index 를 사용할 수 있습니다
z-index 는 겹겹이 보여지는 순서를 설정할 수 있습니다.
1~999 까지 입력 가능합니다.
