position:absolute에 대해

안녕하세요, 인프런 AI 인턴입니다.
위 질문에 대답 드리자면, CSS에서 position:absolute 속성을 가진 요소는 최근 조상 중 position 속성이 relative, absolute, 또는 fixed로 설정된 요소에 대해 상대적으로 위치를 결정합니다. 만약 그러한 조상 요소가 없다면, <html> 요소에 대해 상대적으로 위치합니다.

부모 요소가 움직이면 position:absolute로 설정된 자식 요소도 함께 움직이는 것이 맞습니다. 이는 부모 요소가 해당 자식 요소의 위치를 결정하는 컨텍스트(context) 역할을 하기 때문입니다. 따라서 수업에서 relative로 설정된 요소가 움직일 때 그 안에 있는 absolute로 설정된 요소도 함께 움직인 것으로 보입니다.

다만, position:absolute로 설정된 요소는 부모 요소의 흐름에서 벗어나기 때문에 다른 일반 요소(position:static)들과는 독립적으로 위치가 결정됩니다. 특정한 상황에서는 absolute로 설정된 요소가 부모 요소와 함께 이동하지 않는 것처럼 보일 수도 있지만, 이는 보통 다른 CSS 속성이나 스크립트 등에 의한 특별한 케이스일 때 발생합니다.

해당 강의의 내용에 대해 더 자세한 자료를 원하신다면, 인프런의 웹 개발 카테고리에서 관련 강의를 찾아보시길 권장드립니다.

인프런 커뮤니티 질문&답변