CSS Position (static, relative, absolute, fixed)

본 포스트는 예전에 다른 블로그에 올렸던 포스트를 수정해서 다시 올렸습니다

 

Position 속성은 html문서내 요소를 배치하는 방법을 지정해주는 속성으로
static, relative, absolute, fixed 그리고 IE에서는 지원하지 않는 sticky
이렇게 5가지의 값을 줄수있고 기본값으로는 static으로 설정됩니다.

오늘은 sticky를 제외한 4가지 속성을 구체적으로 살펴보면서 각자의 특성을 이해해보도록 하겠습니다.

 

---

Static

position: static

 

앞에서 말했듯이 포지션 속성(position property)의 기본값입니다.
다른 속성보다 눈에 익숙하지않는 이유는 기본값이라 굳이 명시를 하지 않기 때문입니다.
static 요소를 만들면 일반적인 흐름을 (normal flow) 따라 차례대로 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이게 됩니다.

See the Pen position static by Min Gee (@minki607) on CodePen.

static 요소에는 offset값을 줘도 아무 변화가 일어나지 않습니다. 

요소가 겹쳐져 있을때의 수직위치를 정해주는 z-index 값 또한 적용되지 않습니다. 

여기서 offset이란 top, left, right, bottom 값을 의미하고 
기준이 되는곳으로부터 얼마만큼 떨어져있는지를 나타내기 위해 필요한 속성입니다. 

 

---

Relative

position: relative

이 값이 적용 되더라도 아직까진 일반적인 문서의 흐름을 유지 하면서 배치가 됩니다.
static과 다른점은 이 값을 가진 요소는 static 위치 였을때를 기준으로 offset을 통해 상대적인 (relative) 위치에 배치할수 있다는 점입니다.

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

position:relative로 설정하고 offset을 주지않으면 static과 똑같은 위치에 있지만
위에 예제처럼 top: 10px, right:5px offset이 들어가게 되면 static 위치를 기준으로

위로 10px 오른쪽으로 5px 이동되어 배치된걸 볼수있습니다.

 

position: relative로 지정된 요소들의 특징으로는 다른 요소들의 위치에 영향을 주지 않는다는 겁니다. 예를들어 position: relative인 요소가 아래에 내려갔다고 해서 position: static값을 가진 요소들이 그 빈공간을 채우기 위해 위쪽으로 이동하지는 않습니다.

 

그럼 이 값은 언제 주로 쓰나요? 라고 물어보신다면

예제 처럼 저렇게 relative 설정을 한 요소에 offset값을 바로 주는 경우는 흔치않고 자식 요소에 absolute 포지션 값을 사용하게 될경우 기준이 될 요소에게 relative 값을 많이 줍니다. (자세한 내용은 바로 다음 absolute 내용에서 확인해봅시다)

 

---

Absolute

position: absolute

 

이값이 적용된 요소들은 일반적인 문서의 흐름에서 제외됩니다.
relative가 자신의 static위치를 기준으로 움직였다면, absolute는 position값이 static이 아닌 조상 요소를 기준으로 요소를 배치하게 됩니다. 만약 조상요소중 static이외의 값을 가진 요소가 없다면 html까지 거슬러 올라가 페이지 전체를 기준으로 위치가 결정되는걸 볼수 있습니다.

 

주로 position: relative가 많이 쓰여 position값이 relative인 조상요소만 기준점이 가능하다고 생각할수도 있지만 position:absolute인 요소에 position: absolute를 지정할수도 있습니다.

 

position이 absolute인 요소에게 offset을 주지않으면 auto 값이 주어지는데 이는 static이였을때를 기준으로 위치시키기 때문에 반드시 조상 요소 기준으로 offset값을 줘서 원하는곳에 위치하도록 합니다.

 

아래 예제는 부모 요소가 두개의 자식을 갖고 있는 형태로 position을 변경한적이 없으니 기본값인
position:static이 적용되어 있는상태입니다

 

 

See the Pen position:absolute by Min Gee (@minki607) on CodePen.

 

여기서 자식요소 2번(child 2)에게 position:absolute 값을 줘보겠습니다.

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

2번째 자식요소는 이제 일반적인 문서의 흐름에서 제외되기 때문에 부모 요소가 이를 더이상 자식 요소로 인식하지 않고 첫번째 자식만을 감싸게 됩니다. 두번째 자식은 이제 정상적인 블록레벨의 요소처럼 작동하지않고 static 포지션이 아닌 조상요소를 기준으로 배치가 됩니다.

 

위 예시에서 static이외의 요소가 없었는데도 불구하고 최상위 html을 기준으로 배치가 되지 않았던 이유는 offset값을 주지 않았기 때문입니다.

 

위에서 언급을 했듯이, offset을 주지 않으면 static이였을때를 기준으로 위치시키기 때문에 원래 자리를 유지하게 되는겁니다.

 

화면 좌측상단에 위치 시키고 싶다면

top: 0; left: 0;

값을 주면 아래와 같이 정상적으로 원하는 위치에 배치되는걸 볼수 있습니다.

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

보통은 상위요소에게 position:relative이나 position:absolute값을 줘서 그 요소를 기준으로 배치를 하는경우가 많습니다

아래 예제에서는 부모 container에게 position: relative값을 줘 기준으로 삼고 bottom: 0; right: 0 값을 통해 우측하단에 배치 시켰습니다.

 

See the Pen position 예제 by Min Gee (@minki607) on CodePen.

---

Fixed

position: fixed

 

fixed도 absolute랑 마찬가치로 일반적인 문서 흐름에서 제외시키는 속성입니다.
absolute와 다른점은 viewport를 기준으로 배치가 된다는 점 입니다.
absolute 요소의 경우 스크롤을 내리다보면 언젠간 화면에서 사라지지만 fixed된 요소는 말 그대로 고정되어 스크롤을 무한대로 내리게 된다해도 화면상 똑같은 위치에 있게 됩니다.

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

스크롤을 계속 내려도 똑같은 위치에 배치되어 있는걸 볼수 있습니다. 이 역시 offset값을 사용해 viewport를 기준으로 위치를 변경할수도 있습니다. 위 예제와 같이 항상 화면에 띄어져있는 버튼을 위치하거나 항상 상단에 고정되어있는 navigation을 만들기 위해 많이 쓰입니다.

 

참고자료: position CSS - MDN WEB DOCS