TIL - 08 - CSS - Layout-position

position 속성 - relative, absolute, fixed

CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 원하는 위치에 요소를 그려 넣을 수 있다.
position에서 사용하는 값은 아래와 같다.

• static (거의 사용하지 않는다.)
  요소를 일반적인 문서 흐름에 따라 배치한다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않는다. 기본값이다.
• relative
  position: relative; 자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동 하지는 않는다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
  top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티다.
• absolute
  position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다. 어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다.
• fixed
  fixed는 말그대로 고정됐다는 뜻이다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다. 주로 사이트 상단 메뉴바등에 사용한다.
• sticky
  sitcky 속성은 사용할때 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 한다. sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성이다.

참고

https://developer.mozilla.org/ko/docs/Web/CSS/position
https://deeplify.dev/front-end/markup/position-sticky