position 속성 - relative, absolute, fixed

기본 값 : static -> 문서 흐름에 맞춰 배치 / 조정 불가능~

relative : 원래의 위치부터 계산하여 배치

absolute : 원래 위치와 별개로 부모 요소 기준으로 계산하여 배치

fixed : 부모 요소와 관계 없이, 브라우저 화면의 상대 위치를 기준으로 계산하여 배치

 

부모요소인 회색 박스 안에서 각각 relative / absolute / fixed를 

right : 10px ;  bottom : 10px ; 를 하여 나타내보았다 

회색박스가 부모요소다

1. relative는 원래 위치인 왼쪽 끝에서 오른쪽과 아래쪽으로 10px씩 밀려서 이동했다

2. absolute는 부모 요소인 회색박스에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다

   ( 주의 : 부모 position이 relative가 아니라면 부모 요소를 무시하고 나가버림 )

3. fixed는 전체 화면에서 오른쪽과 아래쪽 10px씩 이동한 위치에서 나타났다

 

참으로 다양한 position 의 속성이라고 볼 수 있다 ~!