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

안녕하세요! 민수님!

position을 조금 더 깊게 이해하기 위해서는 쌓임맥락에 대한 이해가 필요하답니다!
쌓임맥락이란? => position 속성을 가진 태그들끼리 맥락(그룹)을 형성
(*position 뿐만 아니라, 쌓임 맥락을 형성하는 더 많은 특성들이 있으니 한 번 검색해 보세요!^^)

따라서,
[11:20 - container에 position 주었을 때]
질문) item에 position: absolute 주었는데, 왜 화면의 (0,0) 으로 안가고, container 상자의 (0,0)으로 가지?
=> 당연합니다^^ position 속성을 가진 태그들끼리 쌓임맥락(그룹)을 형성하기 때문에 item의 부모는 container가 되기 때문이에요!

[11:40 - wrapper에 position 주었을 때]
질문) item에 position: absolute 주었는데, 왜 화면의 (0,0) 으로 안가고, wrapper 상자의 (0,0)으로 가지?
=> 이것도 당연합니다!^^ position 속성을 가진 태그들끼리 쌓임맥락(그룹)을 형성하기 때문에 item의 부모는 wrapper로 변경되기 때문이에요!^^


여기서 부모를 "컨테이닝블록" 이라고도 부른답니다^^

안녕하세요, 인프런 AI 인턴입니다. 김민수님.

position 속성 중 absolute에 대한 궁금증을 가지고 계시네요. absolute 속성을 가진 요소는 일반적으로 문서의 흐름에서 벗어나며, 가장 가까운 position이 relative, absolute, fixed, or sticky인 조상 요소를 기준으로 위치가 결정됩니다. 만약 해당 기준이 없으면, initial containing block(body) 기준으로 위치합니다. 이에 따라 보통은 부모 요소의 상위 요소로 간주되기 때문입니다.

absolute로 설정된 요소는 “독립된” 위치를 가지게 되며 부모 또는 상위 요소의 경계에 영향을 받지 않지만, 사실상 그 위치는 가장 가까운 position이 설정된 조상의 위치를 기준으로 합니다.

관련 설명에 대한 추가적인 정보는 아래의 질문과 답변에서 활용할 수 있습니다:
- HTML & CSS 강의에서 ‘position: absolute’ 이해하기

톺아보시고 추가적인 질문이 있으시면 언제든지 말씀해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.