[CSS] position 속성 - relative, absolute, fixed

position 알아보기

✍️한 줄 요약

• static : 기본 포지션은 static 으로 되어있다. → 이 상태에서는 top, left 등의 값을 줘도 이동하지 않는다.
• relative : 자기자리로부터 '상대적으로' 이동, 나머지는 영향없음
• absolute : parent 요소로부터 이동, 나머지 요소들은 마치 absolute된 애가 그 자리에 없었던 것처럼 배치가 된다.(보통 사용하고 싶을 때 부모에게 relative를 적용)
• fixed : 상자 안에서 완전히 벗어나서 윈도우를 기준으로 이동 nav바나 title 고정시킬 때 사용.
• sticky : 스크롤에 관계없이 그 자리에 고정
• z-index : 레이어 개념으로 사용. auto면 윈도우와 같고, 숫자가 높을수록 더 위쪽의 레이어다.

static

아무것도 안했을 때 기본 포지션은 static 으로 되어있다. → 이 상태에서는 top, left 등의 값을 줘도 이동하지 않는다.

relative

1. 자기자신에 대해 이동한다. → top, left, right, bottom 등으로 이동시켜줌

2. 기존의 맥락에 영향 없다. 나머지는 원래 그 자리에 존재한다.

3. 새로운 쌓임 맥락을 생성한다. 즉, z-index 값이 기존보다 높다.

absolute

1. 가장 가까운 위치의 조상 요소에 대해 이동한다. 그러니까, 가장 가까운 relative, absolute, fixed된 부모에 대해 이동한다. → “absolute를 사용할 경우, 일반적으로 부모를 relative로 지정해준다.”
2. 기존의 맥락은 변한다. 마치, absolute된 자식이 그 자리에 없던 것처럼
3. 새로운 쌓임 맥락 생성한다.

fixed

1. 상자 안을 완전히 벗어나서 윈도우 기준으로 이동한다.
2. 기존 맥락은 변한다.
3. 새로운 쌓임 맥락 생성한다.
4. navbar나 title고정시킬 때 사용한다.

sticky

1. 스크롤링 되어도 움직이지 않고 있게 한다. 즉, 가장 가까운 스크롤링 되는 부모를 기준으로 위치가 계산된다.

   가만히 있다가 스크롤링이 되어 페이지가 넘어가도 그 자리에 있다는 뜻!

2. top, left등의 속성은 부모를 기준으로 계산된다는 뜻!

3. 당연히 새로운 쌓임 맥락이 생성된다.

z-index

1. 레이어 개념으로 생각하면 된다. 숫자가 높을수록 위에 위치한다.

2. z-index: auto; 로 지정되면, z-index가 그냥 부모와 같다. 내가 fixed 등으로 z-index에 변경을 주고 auto로 설정하면 그 위에 뜨는 것이 아닌, 그냥 부모와 같은 레이어에 위치하게 된다는 뜻이다.

   (아래 그림에서 body의 z-index가 1로 변하면, auto로 지정되어 있는 애들은 뒤에 깔리게 된다.)

3. 깊이를 조정하는 것이니, 당연히 박스의 높낮이를 조절할 때 사용한다.
   

z-index - CSS: Cascading Style Sheets | MDN