postion 속성에 대해

이전에도 정리했었지만, 헷갈리는 관계로 다시 정리하자.

1. position: static; → static 은 기본값으로, html 요소를 작성한 순서대로 배치해줌.

2. position: relative; → relative 는 요소가 원래 있었던 위치를 기준점으로 원하는 만큼 이동시킬 수 있게 해줌.

3. position: absolute; → absolute 는 HTML 요소들의 계층 구조에서, position: static 이 아닌 가장 가까운 부모 요소를 기준으로 위치를 설정하게 해준다. 모든 요소가 static 이라면, body 를 기준으로 설정함. 그리고, absolute 로 설정해주면 더 이상 다른 html 요소들과 상호작용하지 않게 됨.

4. position: fixed; → fixed 는 html 요소가 원래 있던 위치에 계속 고정할 수 있게 해줌. 웹 사이트에서 스크롤 해도 그 위치에 있는 메뉴 같은 것을 연상하면 좋음.

5. position: sticky; → 이것은 처음 보는 속성이다! https://www.daleseo.com/css-position/ 이곳을 참고해보자. 스크롤해서 요소가 사라지는 시점에 fixed 효과를 주면서 동시에 다른 요소를 가리지 않게 만들어 주는듯!