페이지상에서 name 지정한곳으로 이동할때 질문있습니다.

Question

요약정보
상세정보

위와같은 방법으로 페이지 이동을 사용했었는데요..
상단 메뉴를 항상 떠있게 변경하니
상세정보를 클릭시 윗부분이 떠있는 부분에 가려져버립니다...

이동되는 영역별로 상단 마진을 많이 주면정상적으로 보여지긴하는데..
그냥 스크롤로 이동시 공백이 너무 많아지는것같구요..
이럴때 팁같은거없을까요?

마르스컴퍼니 · Accepted Answer

참고해 볼 수 있는 글들입니다.

 

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

스팸마요 · Answer

css 에서

position:relative 영역 그대로 유지 되면서 z-index 를 사용할 수 있습니다

position:absolute 영역 없어지고 그자리에서 띄워지면서 z-index 를 사용할 수 있습니다

 

z-index 는 겹겹이 보여지는 순서를 설정할 수 있습니다.

1~999 까지 입력 가능합니다.

파아랑 · Answer

anchor를 href 네이밍이 아닌 함수로 하고 해당위치를 계산해서 +얼마로 상대값으로 계산하시면 될것같습니다.

블랙캣77 · Answer

이동을 태그로 바로 하는게 아니라 스크립트를 만드시고 해당 위치의 정보를 가지고 오고 그 정보에 고정된 크기 만큼 더 해주면 될거 같습니다. 스크롤 위치 구하는 방법은 검색을 하시면 어렵지 않게 구하실수 있읏실거 같습니다.

플라이 · Answer

가려지는 부분은 z-index 부분을 css로 반영하셔서 레이어 위치를 상단이 아닌 아래로 가려지도록 적용하셔야 할듯 싶습니다.

페이지상에서 name 지정한곳으로 이동할때 질문있습니다.

답변 5개 / 댓글 1개

답변에 대한 댓글 1개

페이지상에서 name 지정한곳으로 이동할때 질문있습니다.

답변 5개 / 댓글 1개

답변에 대한 댓글 1개

공유하기