여러 요소를 "위치: 절대"로 설정하면 상황이 변경되는 이유는 무엇입니까?

Question

저는 HTML과 CSS를 처음 접하므로 설명을 최대한 간단하게 하고 싶습니다. 프론트엔드 멘토님의 프로젝트를 진행하고 있어요

관련 HTML 콘텐츠는 다음과 같습니다:

으아아아

관련 CSS 콘텐츠는 다음과 같습니다.

으아아아

이것이 지금 내 프로젝트의 모습입니다

이제 "perfume-name-container" 및 "desc-container" 클래스에서 위치 선언의 주석 처리를 제거하면 내 프로젝트는 다음과 같습니다.

여기에 이미지 설명을 입력하세요

포지셔닝에 대한 제가 이해한 바에 따르면 세 개의 div는 모두 함께 쌓여 있어야 하지만 오른쪽으로 오프셋되어서는 안 됩니다. 무슨 일이 일어나고 있으며 어떻게 해결할 수 있나요?

상단 및 왼쪽 명령을 사용해 보았지만 div가 전혀 움직이지 않습니다

Answer 1

절대 - 요소는 첫 번째 위치에 있는 상위 요소에 절대적으로 위치합니다. 상대 - 요소가 일반 위치를 기준으로 배치됩니다.

정렬하려면 절대값이나 상대값을 너무 많이 사용하지 않고 그리드나 플렉스를 사용하세요.

으아악