[CSS] position 속성

[개요]

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.

 

• static :  기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
• absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
• relative : 원래 있던 위치를 기준으로 좌표를 지정합니다.
• fixed : 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
• inherit : 부모 태그의 속성값을 상속받습니다.

좌표를 지정해주기 해서는 left, right, top, bottom 속성과 함께 사용합니다.

position 을 absolute 나 fixed 로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

 

[사용법]

 

#box1 { position:static }
#box2 { position:absolute }
#box3 { position:relative }
#box4 { position:fixed }
#box5 { position:inherit }

[예시]

[결과]