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

작성한 질문수

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리

position을 줬을 때 너비값을 잃는 이유

작성

1.8K

7:00 쯤에서

position: absolute나 position:fixed를 주면 block요소(div)인 modal이 width값을 잃는다고 했는데 왜 잃게 되나요?

또 부모 요소에는 position:relative를 주고 자식 요소에는 position:absolute를 준다고 들었던 것 같은데 부모요소인 modal에 relative를 주지 않고 부모요소와 자식요소 둘 다 absolute를 주는 이유가 뭔가요?

답변 2

지식공유자

position: absolute나 position:fixed를 주면 너비 값을 잃는 것이 아니라 인라인 블록으로 성질이 바뀌어 버리기 때문에 인라인 블록은 컨텐츠 양만큼 너비가 알아서 맞춰지는 성질이 있습니다.

부모요소에 Relative가 없어도 position: absolute나 position:fixed가 있으면 부모 자식 관계를 만드는 Relative의 역활을 동시 합니다.

아래 다른 수강생 분이 질문에 대한 제 답변이 도움이 되실 거예요.

질문자

- position 속성을 주면 원래 인라인 블록으로 성질이 바뀌는 건가요?

- 동영상처럼 모달창 만들 때 부모 요소에 position:absolute 또는 position:fixed 대신 position: relative를 써도 되나요?

지식공유자

네 인라인 블록으로 바뀝니다.

모달창 부모로서의 래러티브 주시면 부모 요소를 중앙으로 보낼 수가 없어요 앱솔루트를 하셔야 돼요.

작성한 질문수