[CSS]Position

position 속성은 요소의 위치를 지정합니다.

position은 웹 페이지를 만들때 정말 자주 사용하게 되는데요.

디자인 시안에 맞춰 디자인을 적용할 때 position이 없으면 어떻게 됬을까 생각듭니다.

그런데 정확히 스크롤을 내릴때라던지 구체적으로 각각 뭐가 다른지 잘 모르고 사용해왔기 때문에 오늘은 제 궁금증을 전부 풀어보는 시간을 가져보려합니다.

---

value의 종류

• static
• relative
• absoulute
• fixed
• sticky

---

position: static;

• position을 지정하지 않으면 기본으로 설정되는 값 입니다.
• top, bottom, left, right을 사용할 수 없습니다.
• 일반적인 페이지 흐름에 따라 위치하게 됩니다.

top속성을 넣어보겠습니다.

---

position: relative;

• 원래의 위치(static)에 상대적인 위치가 됩니다.
• left, right, top, bottom 속성을 사용할 수 있습니다.

아래와 같이 `position:relative`를 추가했습니다.

position이라는 박스가 생겼습니다.

이제 `top: 30px; left: 50px;`을 추가해 보겠습니다.

보면 margin이나 padding이 생긴 것이 아니라 position이 늘어났네요. 거기에 따라 화면 아래의 x축 스크롤도 생겼습니다.

---

position: fixed;

• vuepoint에 상대적으로 위치합니다.
• 페이지가 스크롤되더라도 항상 같은 위치에 있습니다.
• top, right, bottom, left 사용할 수 있습니다.
• 공백을 남기지 않습니다.

`position: fixed`를 추가하면 ui상으로는 변화가 없지만, 개발자 도구에서 확인해보면 position이 생긴 것을 확인할 수 있습니다.

일반적인 페이지 배치 흐름을 무시한 것을 확인 할 수 있습니다.

fixed는 스크롤을 내리더라도 항상 같은 위치에 있습니다.

---

position: absolute;

• 가장 가까운 조상 요소를 기준으로 위치가 지정됩니다.
• 만약 조상 요소에 위치 속성이 지정되어 있지 않다면 body요소를 기준으로 위치가 지정됩니다.
• 페이지 스크롤과 함께 움직입니다.
• 일반적인 웹 표시 흐름에서 제거되며 다른 요소들과 겹칠 수 있습니다.

document를 기준으로 위치가 지정됩니다.

이제 조상 요소에 relative속성을 넣었습니다.

조상 요소를 기준으로 위치하는 것을 확인 할 수 있습니다.

position에 static을 넣으면 document를 기준으로 위치를 지정합니다.

static이외의 속성에서는 전부 조상요소를 기준으로 위치하는 것을 확인할 수 있습니다.

 

이번에는 div태그로 두번 감싸보겠습니다.

ancestor와 relative 태그에 position을 지정하지 않으면 document를 기준으로 위치하는 것을 확인할 수 있습니다.

ancestor에 position을 추가하면 ancestor을 기준으로 absolute div가 위치하는 것을 확인할 수 있습니다.

이번에는 relative div에도 position 속성을 추가해 보겠습니다.

relative div를 기준으로 absolute div가 위치하는 것을 확인할 수 있습니다.

가장 가까운 조상 요소를 기준으로 위치하는 것을 확인할 수 있습니다.

스크롤도 알아볼까요.

fixed는 스크롤 위치와 상관없이 항상 같은 위치에 고정되었습니다.

하지만 absolute의 경우는 스크롤에 따라 위치가 변경되는 것을 확인할 수 있습니다.

---

position: sticky;

• 스크롤 위치를 기준으로 위치가 지정됩니다.
• 스크롤 위치에 따라 relative와 fixed를 번갈아가며 전환합니다.
• viewport 내에서 지정된 offset 위치까지는 relative에 머물다가 그 이후에는 fixed와 같이 "sticky(딱 붙은)" 위치에 위치하게 됩니다.

아래와 같이 `position: sticky;`를 추가해도 아무런 변화가 없습니다.

`top: 10px;`를 추가하니 개발자 도구에서 10이 추가된 것을 확인할 수 있습니다.

하지만 ui상에는 아무런 변화가 없습니다.

스크롤을 내리면 즉, viewport를 벗어나면  fixed와 같이 스크롤에 상관없이 위치가 고정되어 있는 것을 확인할 수 있습니다.