position 속성 - relative, absolute, fixed

기초적인 내용이지만 마크업 상에서 가장 중요한 position 속성에 대해서  짧게 포스팅하고자 한다.

 

 

위치가 정적인 경우

relative, absolute, fixed를 알기 위해서는 우선적으로 기본 상태인 static에 대해서 설명할 필요가 있다.

 

static

• 모든 태그들은 처음 상태가 static
• 기본 상태이기 때문에 따로 position을 지정해주지 않아도 됨
• 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임

static

 

위치가 동적인 경우

앞서 살펴 본 static은 별도의 변경 없이 요소가 그대로 순서대로 쌓이는 반면에 아래 3개의 position들은 사용자가 임의의 위치 값(top, right, bottom, left)을 지정해줘야 한다.

 

relative

• 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작
• 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정 가능
• 위 4개 방향 값을 사용하며 기본 위치와 다르게 위치가 조정

 

relative

 

absolute

• 가장 가까운 곳에 위치한 조상 엘리먼트(Parent Element)에 상대적으로 위치가 지정
• 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(Document Body)를 기준
• 위치가 지정된 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트

 

absolute

 

fixed

• 고정(fixed) 엘리먼트는 뷰 포트(viewport)에 상대적으로 위치
• 페이지가 오버플로우(overflow)되더라도 늘 같은 곳에 위치

 

See the Pen by 최병현 (@leulsiqf) on CodePen.