• 코드:
​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.relative {
9
            border: 2px solid #B8860B;
10
            width: 500px;
11
            height: 200px;
12
            position: relative;
13
        }
14
        div.absolute {
15
            border: 2px solid #006400;
16
            width: 200px;
17
            height: 100px;
18
            position: absolute;
19
            top: 50px;
20
            right: 0;
21
        }
22
    </style>
23
</head>
24
​
25
<body>
26
​
27
    <h1>절대 위치(absolute position) 지정 방식</h1>
28
    <div class="relative">이 요소는 상대 위치 지정 방식으로 위치를 설정하였습니다.
29
        <div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
30
    </div>
31
    <div class="absolute">이 요소는 절대 위치 지정 방식으로 위치를 설정한 후, top 속성값을 50px로 설정하였습니다.</div>
32
    <p>절대 위치는 해당 요소의 바로 상위의 위치가 설정된 조상(ancestor) 요소에 따라 위치를 재조정하는 방식입니다!</p>
33
​
34
</body>
35
​
36
</html>