study_gitFlow/postion_test.html at main · seohyeon0219/study_gitFlow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position 실습</title>
</head>
<body style="height: 100vh;">
  <!-- position 예제는 각 속성의 동작을 확인하기 위해 해당 옵션의 주석을 하나씩 해제하며 테스트해야 합니다. -->

  <!-- position relative -->

  <!-- <div style="background-color: yellowgreen;">김해원</div>
  <div style="background-color: yellow; position: relative; display: inline; left: 30px; top: 50px;">이서현</div> -->

  <!-- position fixed -->

  <!-- <div style="background-color: blue; color: white; height: 100vh;">윤혜원</div>
  <div style="background-color: lightpink; color: white; height: 100vh;">김유진</div>
  <div style="background-color: blueviolet; color: white; height: 60%; position: fixed; left: 50px; top: 50px;">박준희</div> -->

  <!-- position absolute -->
  <!-- absolute가 적용된 두 개의 div 비교 -->

  <div style="background-color: green;">김현수</div>
  <div style="background-color: aquamarine; position: fixed; top: 50px; left: 30px;">
    김남우

    <div style="background-color: lightskyblue; position: absolute; top: 50px; left: 50px;">이소현</div>
  </div>

  <div style="background-color: lightskyblue; position: absolute; top: 50px; left: 50px;">이소현</div>
</body>
</html>