본문 바로가기

Web/CSS

offsetTop의 기준값 바꾸기

타겟 요소.offsetTop은 스크롤(속도)의 영향을 받지 않아야 하는 것, 고정적이어야 하는 것을 필요로 할 때 유용하다.

offsetTop은 기본적으로 document의 상단에서 해당 요소가 얼마나 떨어져 있는지의 값을 나타낸다.

그런데 만약, 내가 구하고자 하는 요소의 offsetTop값이 문서가 기준이 아니라 타겟의 부모 요소를 기준으로 하고 싶다면 (쉽게 말해, 문서 상단에서 타겟 요소 상단 까지 사이의 거리가 아닌, 부모 요소의 상단에서 해당 요소 상단부분 까지의 거리)

position 속성을 이용해서 offsetTop의 기준 값을 바꿀 수 있다.

우리가 position: absolute를 사용할 때 처럼, 기준으로 잡을 부모 요소에 position: relative를 해주면 된다.

'Web > CSS' 카테고리의 다른 글

CSS 지원 확인 사이트  (0) 2020.05.31
CSS 3D:perspective - 카드 뒤집기 효과  (0) 2020.05.28
css로 애니메이션 넣기: transition, animation  (0) 2020.05.24
CSS FIex  (0) 2020.02.18
css transform  (0) 2019.11.01