[CSS] position의 속성값 relative, absolute

 

position 속성은 요소가 배치되는 방식을 결정한다.

웹 문서 안의 요소를 자유롭게 배치할 수 있다.

 

 

아래는 방식을 결정하는 속성값의 종류와 설명이다.

종류	설명
static	문서의 흐름에 맞춰 배치. default값이다.
relative	문서의 흐름에 맞게 자연스럽게 배치하나, static과 달리 위치값을 지정 할 수 있음.
absolute	위치를 지정해 배치
fixed	특정 위치에 고정

 

여기서 top, bottom, left, right로 최종 위치를 결정하게 된다.

top: 위쪽으로 얼마나 떨어져있는지

bottom:아래쪽으로 얼마나 떨어져있는지

left: 왼쪽으로 얼마나 떨어져있는지

right: 오른쪽으로 얼마나 떨어져있는지

 

 

여기서는 relative와 absolute에 대해 조금 더 정리하고자 한다.

 

1) relative

한마디로 말해 정상적인 위치에 배치하는 것.

static은 그냥 왼쪽 위에서부터 차례대로 놓는 것! relative는 배치 되어있는 문서를 기준으로 자연스럽게 배치한다.

 

2) absolute

절대 위치, 즉 개발자가 원하는 대로 배치하고자 할 때 사용한다.

 

absolute를 사용할 때는 relative를 사용한 요소를 기준으로 위치를 결정하게 된다.

 

따라서, 부모 요소(상위 요소)에서 relative를 지정해야 원하는 대로 배치가 가능하다.