인프런 커뮤니티 질문&답변
작성한 질문수
퍼블리싱 작업 마무리 하기 01 강의
작성
·
38
1
안녕하세요. 강의 잘 보고 있습니다 !
강의를 듣다 궁금한 점이 생겨 문의를 남깁니다.
퍼블리싱 작업 마무리 하기 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 을 주신 이유가 궁금합니다.
답변 2
0
사실 이 부분이 저에게도 명확하지는 않습니다.
absolute가 들어가면 기본적으로 top: 0; left: 0가 되는데 간혹가다 안되는 경우가 있습니다.
이게 언제 그런건지 왜 그런건지는 저도 명확히 설명드리기는 어렵네요.
그래서 확인 차원에서 top: 0; left: 0 주시느게 좋습니다.
명쾌한 답변을 드리지 못해서 죄송합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 디디님.
퍼블리싱 작업에서 포지셔닝과 관련된 부분에서 헷갈리실 수 있습니다. 비슷한 질문이 올라온 적이 있어, 해당 답변 링크를 아래에 공유드리며 설명드리겠습니다.
- position 속성 관련 정리
- position: absolute로 설정한 요소의 위치는 가장 가까운 position: relative, position: absolute, position: fixed의 조상 요소를 기준으로 합니다. 즉, 기본적으로 absolute 요소는 자신을 감싸는 가장 가까운 relative 요소를 기준으로 위치가 설정됩니다.
.btn-fold요소에position: absolute를 설정하고.goods-order-final요소에position: relative를 설정했더라도 left: 0을 추가 설정해주는 것이 정확한 위치를 보장합니다. 이는 다른 스타일이나 레이아웃이 변경되더라도 요소의 위치가 의도한 대로 유지되도록 하는 베스트 프랙티스입니다.
- position: absolute로 설정한 요소의 위치는 가장 가까운 position: relative, position: absolute, position: fixed의 조상 요소를 기준으로 합니다. 즉, 기본적으로 absolute 요소는 자신을 감싸는 가장 가까운 relative 요소를 기준으로 위치가 설정됩니다.
추가적으로, 해당 답변들을 참조하실 때 도움이 될 만한 몇 가지 링크도 함께 첨부합니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
넵 답변 감사합니다 ~!