position : 위치속성
position
위치를 설정할 때 사용하는 속성.
위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다.
절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며
상대 좌표는 태그가 출력된 위치를 기준으로 움직인다.
[속성값]
-static :
태그가 출력된 기본값. position속성을 적용하지 않은 것과 같으며 좌표를 인식할 수 없다.
block속성의 경우 태그가 위에서 아래로 출력된 기본 상태를 의미함.
-relative
:상대좌표를 의미함. block속성의 태그가 출력된 현재 위치에서 left나 top방향으로 이동함.
absolute로 움직일 자식박스의 부모박스에게 보통 적용함.
-absolute
:절대좌표를 의미함. 부모박스(부모 박스가 없으면 브라우저)의 가장 왼쪽 상단 0점을 기준으로
top, left ,right, bottom 방향으로 이동할 수있다.
보통 relative가 적용된 부모 박스 안에 자식박스에게 적용하는 속성.
-fixed
:절대 좌표를 의미함.브라우저 화면을 기준으로 top, left ,right, bottom 방향으로 이동할 수있다.
position : relative
position:relative를 사용하면 박스의 상대적인 좌표값을 가질 수있다. 각각의 박스는 이미지에서 표시된 좌표값을 갖게된다.이때 position:relative는 top과 left만 사용할 수있다.
position : absolute
부모박스 또는 브라우저를 기준으로 좌표값을 갖는다.
position: static
좌표를 인식하지 않기 때문에 박스는 움직이지않는다.
