posiion은 영역에 관련된 속성으로 html 코드에 순서대로 나열 되는
것과 상관없이 원하는 위치에 배치 할 수 있다.
position
- position 종류는 static, relative, absolute, fixed, sticky 가 있다.
- position은 top ,bottom, left ,right 를 사용해야만 위치를 지정 할수 있다.
1. static : 기본값, 다른 좌표로 이동 할 수 없음
static 제외한 다른 position 값에 적용된 요소를 초기화 할때 사용
➡ position을 따로 지정이 안되어 있을때는 위에 그림처럼
static인 기본 값으로 설정 되어 있다.
2. relative : 상대 배치 , 원래 있어야 되는 위치에서 계산
➡ static 그림과 비교하면 relative 그림에서 영역이 위와 왼쪽에서
20px 씩 간격이 벌어진 것을 볼 수 있다.
3. absolte: 부모 역할을 하는 박스의 위치가 기준이 된다.
➡ 세번째에 위치하던 하늘색 박스가 부모 역할을 하는 회색 박스 기준으로 20px씩 위와 왼쪽으로 옮겨진것을 볼수 있다.
4. fixed: : 요소 박스안에서 벗어나서 페이지 상을 기준으로 한다.
➡하늘색 박스가 위에 웹페이지 기준으로 왼쪽과 위에 20px씩 옮겨졌다.
5. sticky : 스크롤을 움직여도 원래 있던 자리에서 벗어나지 않는다.
그리다 보면 ~ ♪