이미지 위에 캡션을 겹칠 때는 무엇을 기준으로 놓을지 먼저 정한다. 문서 흐름에서 빠지는 절대 위치 지정과, 같은 그리드 영역을 공유하는 배치는 높이를 계산하는 방식이 다르다.
- 같은 영역:
grid-area: 1 / 1을 두 요소에 주면 같은 칸에 놓을 수 있다. 캡션의 내용도 그리드 크기 계산에 참여한다. - 절대 위치:
position: absolute는 일반 흐름에서 빠진다. 흔히 부모에position: relative를 두어 기준을 마련하지만, 다른 속성도 포함 블록을 만들 수 있다. - 길어진 글: 겹칠 수 있다고 반드시 겹쳐야 하는 것은 아니다. 캡션이 이미지를 지나치게 가리면 아래로 분리하는 편이 낫다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-02.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>겹쳐 놓은 요소의 기준점: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
figure { display: grid; margin: 0; }
figure > * { grid-area: 1 / 1; min-inline-size: 0; }
svg { display: block; inline-size: 100%; block-size: auto; }
figcaption { align-self: end; z-index: 1; margin: .75rem;
padding: .5rem .75rem; color: #202020; background: #fff;
overflow-wrap: anywhere; }
</style>
<main>
<h1>두 원 사이의 거리</h1>
<figure>
<svg viewBox="0 0 640 400" role="img" aria-labelledby="drawing-title">
<title id="drawing-title">연두색 바탕 위에 나란히 놓인 파란 원 두 개</title>
<rect width="640" height="400" fill="#e8f0d4"/>
<circle cx="210" cy="160" r="75" fill="#3055a5"/>
<circle cx="430" cy="160" r="75" fill="#3055a5"/>
</svg>
<figcaption>가상의 작품, 2026. 두 원은 같은 칸에 머문다.</figcaption>
</figure>
<p>이 문장은 그림과 캡션 뒤에 놓인다.</p>
</main>
</html>캡션을 여러 줄로 바꾸고 창을 좁혀도 다음 문장이 캡션 아래로 이어지는지 확인한다. 캡션을 이미지에서 떼어낼 판단은 캡션이 작품을 바꾸는 순간과 겹침을 포기하는 너비에서 이어갈 수 있다.