웹 페이지에서 요소들을 서로 겹쳐 배치하고 싶다면 CSS의 z-index 속성을 활용하면 됩니다. z-index는 요소의 쌓임 순서(stacking order)를 결정하는 속성으로, 값이 클수록 화면 앞쪽에, 값이 작을수록 뒤쪽에 배치됩니다.
아래 예제에서는 이미지에 position: absolute와 z-index: -1을 적용하여 텍스트 뒤로 이미지를 보내는 방법을 보여줍니다. 직접 실행해 보면서 동작을 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" width="300" height="250">
<p>This is demo text.</p>
</body>
</html>코드 핵심 포인트
- position: absolute — 이미지를 문서의 일반적인 흐름에서 분리하여 좌표 기준으로 자유롭게 배치합니다. z-index는 position이 static이 아닌 요소에만 적용되므로 반드시 함께 설정해야 합니다.
- left: 0px; top: 0px — 이미지를 화면의 왼쪽 상단 모서리에 고정합니다.
- z-index: -1 — 이미지를 음수 값으로 설정하여 일반 텍스트보다 뒤쪽 레이어에 배치함으로써, 텍스트가 이미지 위에 겹쳐 보이게 됩니다.
이처럼 z-index와 position 속성을 조합하면 배경 이미지 위에 텍스트를 얹거나, 팝업·툴팁 같은 오버레이 요소를 손쉽게 구현할 수 있습니다.