CSS의 Position..
Position은 자리 배치를 위해 사용하는 CSS의 레이아웃 property입니다.
기본값으로는 static 을 가지고 있으며 position: 에 relative, absolute, fixed, sticky를 필요에따라 부여하고 배치변화가 가능합니다.
1. relative
relative 뜻은 비교적인, 상대적인 으로 나와있는데요.
기본값인 static에서 relative로 속성을 바꾸는 것만으로 바로 위치가 변하지 않지만, top, right, bottom, left 값을 바꾸는 것으로 기본위치에서 옮기는 것이 가능합니다.
2. absolute
absolute 속성은 absolute 속성이 부여된 요소와 가장 가깝게 연결된 상위 부모 요소(static을 제외한 다른 position 속성을 가진)의 위치를 기준으로 위치가 변하며, 변한 위치에서 똑같이 top, right, bottom, left 값으로 위치변화가 가능합니다. 상위 부모 요소가 static 속성을 가지고 있다면 html <body>를 기준으로 잡으며 페이지 스크롤에 따라 변합니다.
3. fixed
fixed 속성은 뷰포트에 위치를 고정합니다. 스크롤을 해도 배정된 위치에서 움직이지 않습니다. 똑같이 top, right, bottom, left로 위치를 조정합니다.
4. sticky
sticky 속성은 대체적으로 nav_bar 에 많이 사용합니다. relative와 fixed 각각의 특징을 가지고 있다고 볼수 있으며, 사용자의 스크롤링에 따라 relative를 유지하다가 정해진 위치를 벗어나려고 할때 fixed로 변하고 한 위치에 고정됩니다.
