Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7.     body {
  8.         /* 스크롤바가 나타나개 하기 위해 높이값 설정 (fixed속성 체크) */
  9.         height: 1000px;
  10.     }
  11.  
  12.     .wrap {
  13.         width: 300px;
  14.         height: 300px;
  15.         background-color: #fcd;
  16.     }
  17.    
  18.     .box {
  19.         width: 100px;
  20.         height: 100px;
  21.         background-color: green;
  22.         border: 2px solid red;
  23.     }
  24.    
  25.     /* relative 속성 */
  26.     .rel {
  27.         position: relative;
  28.         left: 50px;
  29.         top: 70px;
  30.     }
  31.    
  32.     /* 위치 이동 없이 relative속성만 적용 */
  33.     .rel2 {
  34.         position: relative;
  35.     }
  36.    
  37.     /* absolute 속성 */
  38.     .abs {
  39.         position: absolute;
  40.         left: 50px;
  41.         top: 70px;
  42.     }
  43.    
  44.     /* fixed 속성 */
  45.     .fixed {
  46.         position: fixed;
  47.         right: 10px;
  48.         top: 100px;
  49.     }
  50. </style>
  51. </head>
  52. <body>
  53.     <h2>relative</h2>
  54.     <div class="wrap">
  55.         <!-- 기본값 -->
  56.         <div class="box">relative Test1</div>
  57.         <!-- relative속성 적용, 현재 기본 위치를 기준으로 왼쪽에서 50만큼 위에서 70만큼 이동 -->
  58.         <div class="box rel">relative Test2</div>
  59.     </div>
  60.    
  61.     <hr/>
  62.    
  63.     <h2>absolute</h2>
  64.     <div class="wrap rel2">
  65.         <div class="box">absolute Test1</div>
  66.         <!-- absolute속성 적용, 부모태그의 왼쪽 상단을 기준으로 왼쪽에서 50만큼 위에서 70만큼 이동 -->
  67.         <div class="box abs">absolute Test2</div>
  68.     </div>
  69.    
  70.     <!-- fixed속성 적용, 브라우저 화면을 기준으로  오른쪽에서 10만큼 위에서 100만큼 이동 -->
  71.     <div class="box fixed">fixed Test1</div>
  72. </body>
  73. </html>