position: absolute

복잡한 레이아웃이나 드래그 앤 드랍을 구현하려면 position을 이해해야 합니다.

position을 이해하려면 다음 속성들도 함께 숙지해야 합니다.

• top

• right

• bottom

• left

• z-index

다음 html 코드에

<p id="one">One
<p id="two">Two
<p id="three">Three

다음을 적용하면

body {
  margin: 0;
}

p {
  margin: 0;
  padding: 0;
}

#one {
  background-color: red;
}

#two {
  background-color: green;
}

#three {
  background-color: blue;
}

다음과 같이 One 다음에 Two가, Two 다음에 Three가 표시됩니다.

이렇게 표시되는 이유는 모든 태그의 position 기본 값은 static이기 때문입니다. 싶게 설명하면 html 코드에서 먼저 나오는 태그가 앞에 위치하고 뒤에 나오는 태그는 뒤에 위치한다는 것입니다.

그럼 CSS로 이 순서를 바꿀 수 있는가? 답을 말한다면 그럴 수 없습니다. 대신 흐름과 상관없이 임의의 위치에 놓을 수는 있습니다.

예를 들어 다음과 같이 Two를 One 옆에 놓을 수 있습니다.

그러나 이는 정확한 설명은 아닙니다. Two가 문서 흐름에서 빠져서 Three가 본래 Two가 있던 자리로 이동한 것이고, Two는 One/Three와 상관없이 위치한 것입니다. 즉 레이아웃이라는 측면에서 Two와 One/Three는 전혀 영향을 주고 받지 않습니다.

이를 설정한 방법은 차례대로 보면 다음과 같습니다.

먼저 position을 absolute로 지정합니다.

#two {
  background-color: green;
  position: absolute;
}

결과는 다음과 같습니다.

Two와 Three가 겹쳐진 것으로 보입니다. 그 이유는 간단합니다.

• 일단 Two가 없어졌다고 판단한 Three가 Two 자리에 위치를 했습니다.

• Two가 흐름에서는 빠졌지만 어디에 위치해야 하는지에 대한 정보가 없기 때문에 원래 자리에 그대로 남아 있는 것입니다.

마지막으로 위치를 지정해주어야 합니다. 그 때 사용하는 속성이 top, right, bottom, left 입니다.

#two {
  background-color: green;
  position: absolute;
  left: 70px;
  top: 0;
}

top

페이지의 상단을 기준으로 어느 위치에 놓을 것인지 지정합니다. 0은 맨 상단을 의미하며 값이 클 수록 아래 쪽으로 내려갑니다. 음수를 지정할 수도 있습니다.

right

페이지 오른쪽을 기준으로 어느 위치에 놓을 것인지 지정합니다, 0은 맨 오른쪽을 의미하며 값이 클 수로고 왼쪽으로 이동합니다. 음수를 지정할 수도 있습니다.

bottom

페이지의 하단을 기준으로 어느 위치에 놓을 것인지 지정합니다. 0은 맨 하단을 의미하며 값이 클 수록 위 쪽으로 올라갑니다. 음수를 지정할 수도 있습니다.

left

페이지 왼쪽을 기준으로 어느 위치에 놓을 것인지 지정합니다, 0은 맨 왼쪽을 의미하며 값이 클 수록 오른쪽으로 이동합니다. 음수를 지정할 수도 있습니다.

그림을 보면 알겠지만 넓이는 내용에 맞추어 자동으로 조정됩니다.

static 흐름에서는 특별한 지정이 없으면 상위 태그의 넓이를 기준으로 태그의 넓이가 결정됩니다. 모든 태그의 상위 태그가 body이고 body는 기본으로 웹 브라우저의 전체 크기를 사용하기 때문에 하위 태그들도 전체 크기를 차지합니다.

그러나 absolute는 흐름에서 빠져나왔기 때문에 상위 태그가 없습니다. 그래서 이 경우에는 상위 태그가 아닌 자기 자신의 내용을 기준으로 넓이를 결정합니다. 물론 이 경우에도 width 속성으로 임의의 크기를 지정할 수 있습니다.

left와 right를 모두 설정하면

간단하게 생각하면 됩니다. left와 right를 모두 만족하려면 Two의 width를 조정하면 됩니다.

#two {
  background-color: green;
  position: absolute;
  left: 70px;
  right: 10px;
  top: 0;
}

left와 right와 width를 모두 설정하면

left와 right가 width에 우선합니다. 따라서 width는 무시됩니다.

top과 bottom을 모두 설정하면

마찬가지입니다. top과 bottom을 모두 만족하려면 Two의 height를 조정하면 됩니다.

top와 bottom과 height를 모두 설정하면

top과 bottom이 height에 우선합니다. 따라서 height는 무시됩니다.