CSS 포지션 [static, relative, absolute, fixed, sticky]

CSS 박스 모델은 어떤 영역을 차지할지 결정하는 것. 

CSS 포지션은 어디에 배치할지를 요소 배치를 정하는 개념!

 

 

 

---

기본 값

💡static (기본값)

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. 

position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.

이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며,  top, left, bottom, right 과 같은 속성 값들을 입력해주어도 static일 때는 무시된다. 변함없음.

#a{
    /* 변화가 없다. 왜냐? staic은 기본값이라! */
    position: static;
    top:10px;
    left:20px;
 }

 

---

 

💡 relative

요소를 원래 위치(positon)를 기준으로 상대적(relative)으로 배치해준다고 생각하면 된다.

요소의 위치 지정은 top, bottom, left, right 속성을 이용해서 상하좌우로부터 얼마나 떨어지게 할지를 지정할 수 있다.

아래는 <div> 요소의 position 속성을 relative로 변경하고 top과 left 속성을 설정해보았다.

 

#b{
    /* 그냥 쓰면 변화가 없다. 왜냐? relative는 위치 정보를 줘야함! */
    position: relative;
    top:10px; /*top 으로부터 00만큼 이동*/
    left:20px; /*left 으로부터 20만큼 이동*/
 }

 

 

 

 

---

 

💡 absolute

position는 absolute라는 영단어의 의미 때문에 relative 속성의 정반대 개념이라고 생각하기 쉽다.

오히려 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많다.

position 속성을 absolute로 지정하면 사실 전혀 절대적(absolute)으로 요소를 배치해주지 않는다. 오히려 배치 기준이 상황에 따라 굉장히 달라질 수 있는데, 흥미롭게도 position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. 

아래 예시를 보면서 이 말이 무엇인지 이해할 수 있을 것이다.

 

 

#c{
    position: absolute;
    top : 0px;
    left : 0px;
 }

 

엥? 0_0;;;

 

C가 왜 천장에 붙어있을까?

이유는 다음과 같다. 

absolute 는 부모기준 절대 위치로 이동을 한다. 

이때 부모는 relative position을 가지고 있어야 한다. 

그래서 아까 위에 설명에서 relative 속성값과 함께 자주 쓰인다고 언급한 것이다.

 

absolute 사용법을 정리해보면,

먼저 가장 먼저 해야할 것은 기준이 될 부모를 "relatice"로 만들어주기다! 그러면, 부모를 기준으로 움직이게된다!

즉 C의 부모가 container라고 인정받기 위해서는 컨테이너(내가 미리 지정한 에메럴드 박스 클래스이름)에 relative 포지션을 부여해야함.

 

 

css 코드를 이용해서 에메랄드 박스 클래스인 container에 포지션을 부여한 후 같은 코드를 적용해보자.

.container{
    width: 100%;
    /* 100% view height */
    height: 100vh;
    background-color: mediumaquamarine;

    position: relative;
}

 

 

이제는 C박스가 class container인 에메랄드색 박스를 기준으로 움직인것을 볼 수 있다. 

 

 

그렇다면, 속성값을 변경해보자.

#c{
    position: absolute;
    top : 100px;
    left : 200px;
 }

 

이제 absolute, 이해가 되는지..?

 

 

 

700

---

💡Fixed 

화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 구현할때 많이 쓰이는 포지션이라고한다. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.

즉, 화면 기준으로 배치가 되기 때문에 왼쪽 아래로 배치를 하게 된다면 아무리 스크롤링을 통해 위아래로 움직인다해도 항상 해당 UI는 화면 왼쪽 아래에 위치하게 된다는 말이다. 

 

이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문이다. 

#d{
    position: fixed;
    bottom : 10px;
    right : 10px;
 }

스크롤링을 아무리 해도 D 위치는 변하지 않는다. 이것이 fixed position의 속성이다.

스크롤링 후

 

 

 

 

---

 

💡 sticky

스크롤시 화면에 들러붙는 포지션.

#e{
    
    position: sticky;
    top:0px
 }

스크롤링 후

스크롤링해서 다른 박스들은 보이지 않게 되었는데 E박스만 왼쪽 화면에 붙어있는 것을 확인할 수 있다. 

 

 

 

 

---

정리!

 

 

 

참고 출처

---

https://www.daleseo.com/css-position/

CSS의 position 속성으로 HTML 요소 배치하기

https://www.youtube.com/watch?v=Jb-4zyA_vnc&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=16