[ HTML / CSS ] 포지셔닝, position

static은 기본값. 

 

relative 는 자기 자리에서 삐져나온다. 다른 요소들이 relative요소가 원래 있던 자리를 그대로 둔다.

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. 

absolute은 다른 친구들이 원래 그 차리를 침범 한다. -> 띨롱 나와서 엄마 곁에서 떨어진다. 부모의 relative요소를 찾아서 그 요소에 절대적인 값으로 위치를 조절할 수 있다. 

sticky는 자기 자리에 잘 있다가 사용자 눈에 띌라고 아주 발악을 한다 

fixed는 문서에서 띨롱 떨어져 나와 고정되어 있다. 

 

absolute과 fixed는 원래 있던 자리에 다른 애들이 들어간다. 

absolute은 relative인 부모요소 기준으로 움직이기 때문에 어느 요소의 하위요소에 포지션 속성을 적용하려면, 상위요소에 포지션 설정을 해줘야한다.