CSS 07 위치를 정하자 Position: fixed, sticky

위치를 정하자 포지션 position

 

position 은 문서상에 요소를 배치하는 방법을 정의한다.

position 요소의 배치 방법을 결정! 할려면

top bottom right left 사용해 최종 위치를 결정한다!

 

[상하좌우 위치 지정은 필요에 따라 선택적으로 사용]

🔥 질문에 많이 나오는 개념

 

static : 기본값 , 요소를 일반적인 문서 흐름에 따라 배치한다.

relative: 일반적인 문서 흐름에 따라 배치하되, 상하 좌우 위치에 값에 따라 오프셋을 적용한다.

 

position : relative란

- 요소를 일반적인 문서 흐름에 따라 배치하되, 상하 좌우 위치 값에 따라 오프셋을 적용한다.

 

[✅오프셋이란? : 위치를 얼마간 이동시키는 것을 의미한다]

 

div { position: relative; top:100px; left:100px;}

☆ 원래 위치보다 위에서 100 아래 100 떨어져 있어

position: absolute;

요소를 일반적인 문서 흐름에서 제거하고 상위요소 중 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다.

 

position 지정요소란, position 속성에 속성값이 정의 되어 있는 요소

<div><div class='abs'></div></div>

설명 : .abs 에는 div상위가 있지. div에는 relative 주고 .abs는 absolute 줘야해 .

abs에 위치 값을 지정하고 싶다면!

position fixed

 요소를 일반적인 문서 흐름에서 제거하고 , 지정한 위치에 고정된다 . 픽스

positon:fixed; top:50px left:50px

위에서 50px 왼쪽에서부터 50px떨어진 자리에서 움직이지 않는다!!

position: sticky;

요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤 되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

=> 스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지한다.

기본적으로 문서 흐름되로 진행된다. 이동 스크롤할때 자기 정해진 위치가 있으면 고정이 된다!

position: sticky

기본적으로 문서 흐름대로 한다. 하지만 스크롤 이동을 하면 정해진 위치 요소에 고정이 되어 움직이지 않는다.

sticky 설정후 고정되다가

스크롤 내리면 올라감

position:sticky 주고 상하좌우 요소 값을 줘야한다.

top:0 right:20px 이렇게

 

---

내용정리

position 은 문서 상에 요소를 배치하는 방법을 정의한다. 기본 값은 static

top bottom right left 를 선택적으로 사용해 위치를 지정한다.

relative 는 자기의 원래 위치를 기준으로 오프셋을 적용한다.

absolute 는 가장 가까운 포지션 요소를 기준으로 오프세을 적용함. <div>여기로<div>여기가</div></div>

fixed는 고정되어 움직이지 않는다. 스크롤 이동에도 꼼짝 않음.

sticky 는 스크롤 되는 상위 요소를 기준으로 오프셋을 적용한다.