• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Position</title>
7
    <style>
8
        div.static {
9
            border: 2px solid #B8860B;
10
            position: static;
11
        }
12
        div.relative {
13
            border: 2px solid #CD5C5C;
14
            position: relative;
15
            left: 30px;
16
        }
17
    </style>
18
</head>
19
​
20
<body>
21
​
22
    <h1>상대 위치(relative position) 지정 방식</h1>
23
    <div class="static">이 요소는 정적 위치 지정 방식으로 위치를 설정하였습니다.</div><br>
24
    <div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정한 후, left 속성값을 30px로 설정하였습니다.</div><br>
25
    <p>상대 위치는 해당 HTML 요소의 정적 위치(static position)에 따라 위치를 재조정하는 방식입니다!</p>
26
​
27
</body>
28
​
29
</html>