[개념정리] CSS 포지션 5가지 (static, relative, absolute, fixed, sticky)

요즘은 flexbox 또는 grid 같이 새롭고 편한 것들이 나왔지만

그럼에도 불구하고 스타일의 기본이라고 할 수 있는

css의 positioning을 정리해보려고 한다.

 

css의 position을 이용해서

내가 원하는 element의 원하는 위치를 조정할 수 있다.

화면에 특정 위치에 고정시킬 수도 있고,

또는 다른 element에 맞춰서 상대적으로 위치시킬 수도 있다.

 

 

css의 포지션에는 크게 5가지가 있다.

 

 

1. static

No special position on the page.
It's always positioned according to the normal flow of the page

기본 설정으로,

특별한 포지션을 주지 않고

페이지 디자인 흐름에 맞춰 위치하는 것이다.

bottom 또는 top 같은 다른 position property를 무시한다.

 

2. relative

positioned relative to its normal position.
It's used best when there's an ancestor with some position property as well and we can alter its final position. Otherwise, it’s just like static.

단독으로 쓰이면 static과 동일하게 보여지나,

상위 element에 다른 포지션이 적용되어 있다면

그것에 맞춰 상대적으로 위치하게 된다.

 

3. absolute

 behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport.
If an absolutely-positioned element has no positioned ancestors,
it uses the document body and still moves along with page scrolling.

보여지는 스크린에 고정되는 fixed와는 다르게

absolute는 포지셔닝된 element 중 가장 가까운 상위 element에 맞춰 위치한다.

상위 element가 없는 경우엔 전체 body에 맞춰 위치하고

스크롤을 움직일 때 같이 움직인다.

 

즉, 상위 element에 맞추고 싶으면 상위 element에 relative를 주고

하위 element에 absolute를 준다.

포지션된 상위 element가 없는 하위 absolute element의 경우,

document 전체에 맞춰서 위치된다.

 

 

4. fixed

fix an element somewhere on the page.
It always stays in the same place even if the page is scrolled.

보이는 화면 어딘가에 고정시키는 것.

스크린에 고정시키는 것이기 때문에 스크롤을 내리고 올려도

화면 내에 고정된 위치에 보여진다.

left 또는 right 같은 다른 position property 와 함께 사용 가능하다.

 

포지션된 상위 element가 없는 하위 absolute element가

document 전체에 맞춰서 위치되는 것처럼,

fixed 도 document 전체에 맞춰서 위치된다.

다만, fixed는 스크롤에 영향을 받지 않는다.

 

 

5. sticky

 is a hybrid between relative and fixed position, which allows an element to act like it is relatively positioned until it is scrolled to a certain point.

relative와 fixed의 특징을 모두 가지고 있다.

relative처럼 작동하다가, 스크롤해서 특정 위치가 되면 sticky처럼 그 자리에 고정된다.

 

 

 

position이 정의되지 않은 element에는

bottom, top, left, right, z-index 와 같은 정렬이 적용되지 않는다.

Note: Without having defined the position method,
you cannot assign the alignment within this position like bottom, top, left and right.

 

 

 

 

 

참고 사이트

https://medium.com/@madhur.taneja/css-layouts-cced6c7a8764

CSS Layouts

https://www.educative.io/edpresso/what-is-position-property-in-css

What is position property in CSS?

https://css-tricks.com/almanac/properties/p/position/

position