position: 요소의 배치
- static; - 기본값. 아무런 특성이 없기 때문에 주로 다른 포지션 값이 적용된 요소를 초기화 하고자 할 때 사용.
- relative; - 일반적이 흐름에 따라 자기 자신을 기준으로 위치 지정. top, right, bottom, left 위치 특성과 함께 사용되거나 생략 될 수 있음. 다른 요소에 영향을 주지 않음.
- absolute; - 일반적인 흐름에서 벗어나며 포지션이 적용된 가장 가까운 부모 요소를 기준으로 위치 지정. top, right, bottom, left 위치 특성과 함께 사용
- absolute가 적용된 p태그를 감싸고 있던 border 테두리가 높이값을 인식하지 못한다.
- 기준 값을 설정해주지 않으면 body를 기준으로 위치 설정
- 테두리만 남은 wrapper에 position: relative를 적용시키면
- wrapper를 기준으로 위치 적용.
- absolute 기준은 반드시 부모 이상의 요소에 적용해야 하며 자식, 형제 관계의 요소에는 기준값을 부여해도 적용되지 않음. 부모와 조상에 포지션이 적용된 경우 가까운 부모를 기준으로 적용.
- 기준 position값으로 어떤 것이 와도 상관 없지만 relative를 기준으로 많이 사용하는 이유는 위치 특성(t,b,r,l)과 함께 사용하지 않으면 기존 레이아웃에 영향을 주지 않기 때문.
- fixed; - 일반적인 흐름에서 벗어나며 브라우저를 기준으로 위치 지정. top, right, bottom, left 위치 특성과 함께 사용 transform, perspective, filter 특성이 부모 요소에 적용되어 있으면 그 요소를 기준으로 삼는다.
- 브라우저를 기준으로 위치가 고정된다.
- position: fixed는 컨텐츠가 없어도 body 영역 전체가 인식이 됨
- 인라인 요소의 가로.세로 값도 인식이 되며 적용 가능.
- sticky; - 상대 위치처럼 움직이지만 지정된 위치 값에 도달하면 고정 위치 성격을 가짐
- 해당 요소가 부여한 위치 특성값에 도달하면 고정위치의 포지션으로 성격이 변함.
- 부모 요소들 중 하나라도 overflow:hidden이나 height값이 %로 적용되어 있으면 동작하지 않음.
- top, left, right, bottom 중 하나는 반드시 작성되어야 하며 작성되지 않으면 relative와 동일한 성격을 가짐.
- 부모 요소의 영역을 벗어날 수 없음.
본래 자리에 위치해있다가
지정한 위치값에 도달하면 브라우저에 고정되어 따라다님