이미지 위에 캡션을 겹칠 때는 무엇을 기준으로 놓을지 먼저 정한다. [[문서 흐름]]에서 빠지는 절대 위치 지정과, 같은 그리드 영역을 공유하는 배치는 높이를 계산하는 방식이 다르다.
- **같은 영역:** `grid-area: 1 / 1`을 두 요소에 주면 같은 칸에 놓을 수 있다. 캡션의 내용도 그리드 크기 계산에 참여한다.
- **절대 위치:** `position: absolute`는 일반 흐름에서 빠진다. 흔히 부모에 `position: relative`를 두어 기준을 마련하지만, 다른 속성도 포함 블록을 만들 수 있다.
- **길어진 글:** 겹칠 수 있다고 반드시 겹쳐야 하는 것은 아니다. 캡션이 이미지를 지나치게 가리면 아래로 분리하는 편이 낫다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-02.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
겹쳐 놓은 요소의 기준점: 제작 예제
두 원 사이의 거리
가상의 작품, 2026. 두 원은 같은 칸에 머문다.
이 문장은 그림과 캡션 뒤에 놓인다.
```
캡션을 여러 줄로 바꾸고 창을 좁혀도 다음 문장이 캡션 아래로 이어지는지 확인한다. 캡션을 이미지에서 떼어낼 판단은 [[캡션이 작품을 바꾸는 순간]]과 [[겹침을 포기하는 너비]]에서 이어갈 수 있다.
## 참고
- [셰이 하우: 내용 배치](https://learn.shayhowe.com/html-css/positioning-content/)
- [MDN: 그리드에서 요소 겹치기](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts)
- [MDN: position](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position)
#HTML #CSS #편집