Exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box1, #box2, #box3 {
width: 200px;
height: 100px;
border: 1px solid black;
background: #cbfbfc;
}
/*
투명종이 개념이다. 네모난 박스를 여러개 겹쳐진다.
기준점은 최초 div 위치
*/
#box3 {
position: relative;
/*
left:50px;
top:-50px;
*/
right: 50px;
}
</style>
</head>
<body>
<!-- Ex25_relative.htm -->
<div id="box1">상자</div>
<div id="box3">테스트</div>
<div id="box2">상자</div>
</body>
</html>
결과
아래이미지를 보면 임의로 짤린것이 아니라 relative를 통해 상자를 왼쪽으로 좀더 배치시킨 상자가 왼쪽으로 밀린 모습입니다.
