1. position이란?

이름에서처럼, position이란 HTML 태그의 위치를 지정해주는 속성입니다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.

2. position의 종류

2.1 position : static

기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가집니다. 즉 html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>static</title>
  <style>
  .box1{
    position:static;
    background-color: green;
    color:white;
    width: 100px;
    height: 100px;
  }

  .box2{
    position:static;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }

  .box3{
    position:static;
    background-color: blue;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>
</html>

이렇게 static은 차례대로 엘리먼트를 놓습니다!

2.2 position : relative

단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있습니다. 그럼 대체 '무엇'에 상대적인지 궁금해하실 텐데요. 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적입니다. relative는 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.

relative 속성은 원래의 자리를 인식하지만 left, right, top, bottom 속성을 이용해서 움직일때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>relative</title>
  <style>
  .box1{
    position: static;
    background-color: green;
    color: white;
    width: 100px;
    height: 100px;
  }
  .box2{
    position:relative;
    left: 40px;
    background-color: red;
    color:white;
    width: 100px;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

relative 속성을 주어 box2가 원래 있어야 할 자리에서 왼쪽으로 40px 떨어뜨린 모습입니다.

2.3 position : absolute

absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있습니다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있습니다.

그러나, 이 absolute도 눈치를 보는 녀석이 있는데, 바로 부모 요소입니다. absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됩니다. 마치 relative가 static 속성값이었을 때의 자리를 유념하고 있는 것처럼요.