position 속성, position 속성값

 

position 속성

·       웹 문서 안의 요소들의 위치를 자유자재로 배치할수 있는 속성

·       position 속성은 보통 단독으로 쓰이기 보다는 left, right, top, bottom 속성과 함께 쓰이며 텍스트나 이미지 등 여러 개의 요소를 원하는 위치에 배치할 수 있습니다.

·       HTML과 CSS를 이용해 웹 문서를 만들 때 많이 사용되어 집니다.

 

{ position: 속성값; }

 

 

 

position 속성값

position 을 absolute 나 fixed로 설정시 가로 크기가 100%가 되면 block 태그의 특징이 사라지며 inline-box 처럼 크기에 맞게 딱 붙게 됩니다.

속성값	의미
static	·       기본값 ·       위치정보를 임의로 설정 해줄 수 없으며 ·       요소들를 문서의 흐름에 맞춰 배치할 때 사용합니다.
absolute	·       절대위치 ·       원하는 위치를 지정하여 배치할 때 사용 ·       문서 좌측상단을 기준으로 위치정보를 설정하며 스크롤 시 이동합니다.
relative	·       상대위치 ·       이전 요소에 자연스럽게 연결하여 배치할 때 사용 ·       static 위치 사용시 있던 위치를 기준으로 이동합니다.
fixed	·       위치 고정 ·       스크롤과 상관없이 항상 문서 좌측상단을 기준으로 좌표가 설정됩니다. ·       지정한 위치에 고정하여 배치되기 때문에 해당 요소가 화면에서 잘릴 수 도 있습니다
inherit	·       부모 태그의 속성값을 상속받게 된다.

 

 

 

출력결과