position:absolute에 대해

Question

안녕하세요. 24:14언저리의 수업을 보면 absolute함수가 부모요소중 relative로 설정된 부모요소에 대한 상대적위치라고 하시면서 relative요소를 움직이시면서 보여주는데 보면 그 안에있는 general 함수가 적용된 일반요소도 같이 움직이는것이 보입니다. 부모요소가 커다란 집합체로 부모요소가 움직이면 그안에 속해있는 자식요소들도 원래 같이 움직이는거아닌가요??

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 위 질문에 대답 드리자면, CSS에서 position:absolute 속성을 가진 요소는 최근 조상 중 position 속성이 relative , absolute , 또는 fixed 로 설정된 요소에 대해 상대적으로 위치를 결정합니다. 만약 그러한 조상 요소가 없다면, <html> 요소에 대해 상대적으로 위치합니다. 부모 요소가 움직이면 position:absolute 로 설정된 자식 요소도 함께 움직이는 것이 맞습니다. 이는 부모 요소가 해당 자식 요소의 위치를 결정하는 컨텍스트(context) 역할을 하기 때문입니다. 따라서 수업에서 relative 로 설정된 요소가 움직일 때 그 안에 있는 absolute 로 설정된 요소도 함께 움직인 것으로 보입니다. 다만, position:absolute 로 설정된 요소는 부모 요소의 흐름에서 벗어나기 때문에 다른 일반 요소( position:static )들과는 독립적으로 위치가 결정됩니다. 특정한 상황에서는 absolute 로 설정된 요소가 부모 요소와 함께 이동하지 않는 것처럼 보일 수도 있지만, 이는 보통 다른 CSS 속성이나 스크립트 등에 의한 특별한 케이스일 때 발생합니다. 해당 강의의 내용에 대해 더 자세한 자료를 원하신다면, 인프런의 웹 개발 카테고리 에서 관련 강의를 찾아보시길 권장드립니다.