• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Position</title>
7
    <style>
8
        .container {
9
            border: 3px solid red;
10
            width: 100%;
11
            height: 1000px;
12
            position: relative;
13
        }
14
        .position {
15
            width: 150px;
16
            height: 50px;
17
            top: 100px;
18
            left: 120px;
19
        }
20
        .static {
21
            border: 3px solid black;
22
            position: static;
23
        }
24
        .relative {
25
            border: 3px solid green;
26
            position: relative;
27
        }
28
        .fixed {
29
            border: 3px solid orange;
30
            position: fixed;
31
        }
32
        .absolute {
33
            border: 3px solid blue;
34
            position: absolute;
35
        }
36
    </style>
37
</head>
38
​
39
<body>
40
​
41
    <h1>정적 위치(static position) 지정 방식의 특징</h1>
42
    <div class="container">
43
        <div class="static position">정적 위치(static position)</div>
44
        <div class="relative position">상대 위치(relative position)</div>
45
        <div class="fixed position">고정 위치(fixed position)</div>
46
        <div class="absolute position">절대 위치(absolute position)</div>
47
    </div>
48
​
49
</body>
50
​
51
</html>