• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Position</title>
7
    <style>
8
        .position {
9
            width: 180px;
10
            height: 50px;
11
        }
12
        .static {
13
            background-color: lightblue;
14
            position: static;
15
        }
16
        .first {
17
            background-color: orange;
18
            position: fixed;
19
            top: 90px;
20
            left: 120px;
21
        }
22
        .last {
23
            background-color: orange;
24
            position: fixed;
25
            top: 180px;
26
            left: 120px;
27
            z-index: -1;
28
        }
29
    </style>
30
</head>
31
​
32
<body>
33
​
34
    <h1>z-index 속성을 이용한 노출 순서 변경</h1>
35
    <div>
36
        <div class="static position">정적 위치(static position)</div>
37
        <div class="first position">고정 위치(fixed position)</div>
38
    </div>
39
    <br><br>
40
    <div>
41
        <div class="static position">정적 위치(static position)</div>
42
        <div class="last position">고정 위치(fixed position)</div>
43
    </div>
44
​
45
</body>
46
​
47
</html>