퍼블리싱 작업 마무리 하기 01 강의

Question

안녕하세요. 강의 잘 보고 있습니다 ! 강의를 듣다 궁금한 점이 생겨 문의를 남깁니다. 퍼블리싱 작업 마무리 하기 01 강의 중 .btn-fold에 left : 0 을 주라고 하셨는데, 이전 강의 에서 .goods-order-final 에 position: relative; 로 부모로 선언하고, 그 자식으로 .btn-fold 로 position: absolute; 를 선언하여 굳이 left : 0 을 주지 않아도, 위치가 잘 잡히는데, .goods-order-final 에 position: relative; 를 제거하고.btn-fold 에 left: 0 을 주신 이유가 궁금합니다.

codingworks · Answer

사실 이 부분이 저에게도 명확하지는 않습니다. absolute가 들어가면 기본적으로 top: 0; left: 0가 되는데 간혹가다 안되는 경우가 있습니다. 이게 언제 그런건지 왜 그런건지는 저도 명확히 설명드리기는 어렵네요. 그래서 확인 차원에서 top: 0; left: 0 주시느게 좋습니다. 명쾌한 답변을 드리지 못해서 죄송합니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 디디님. 퍼블리싱 작업에서 포지셔닝과 관련된 부분에서 헷갈리실 수 있습니다. 비슷한 질문이 올라온 적이 있어, 해당 답변 링크를 아래에 공유드리며 설명드리겠습니다. position 속성 관련 정리 position: absolute로 설정한 요소의 위치는 가장 가까운 position: relative, position: absolute, position: fixed의 조상 요소를 기준으로 합니다. 즉, 기본적으로 absolute 요소는 자신을 감싸는 가장 가까운 relative 요소를 기준으로 위치가 설정됩니다. .btn-fold 요소에 position: absolute 를 설정하고 .goods-order-final 요소에 position: relative 를 설정했더라도 left: 0을 추가 설정해주는 것이 정확한 위치를 보장합니다. 이는 다른 스타일이나 레이아웃이 변경되더라도 요소의 위치가 의도한 대로 유지되도록 하는 베스트 프랙티스입니다. 추가적으로, 해당 답변들을 참조하실 때 도움이 될 만한 몇 가지 링크도 함께 첨부합니다: label에 absolute 설정 관련 문의 position 속성들이 맞지 않고 혼동될 때의 사례 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.