position 속성값이 relative일 때는 기준점이 요소의 왼쪽 위 모서리가 됩니다.
그림 6-46 relative 값의 기준점
설명만으로는 이해하기 어려우니 예제를 살펴봅시다. 다음 코드는 div 태그 3개를 각각 가로 100px, 세로 100px로 지정하고 배경색도 서로 다르게 지정합니다. 그리고 class 속성값이 green-box인 요소의 position 속성값을 relative로 하고, 좌표 속성 중 left를 사용해 왼쪽을 기준으로 좌푯값을 지정합니다.
06/05/relative.html
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
}
.green-box{
background-color:green;
position:relative;
left:100px;
}
.blue-box{
background-color:blue;
}
</style>
</head>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
<div class="box blue-box"></div>
</body>