position 속성

1. position 속성

position 속성을 이용하여 텍스트나 이미지를 나란히 배치할 수 있고, 여러개의 요소를 원하는 위치에 배치할 수 있다.
속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 요소의 위치를 지정할 수 있다.

top: 0;
bottom: 50px;
left: 0;
right: 30px;

• 별도의 프로퍼티를 지정하지 않으면 static과 동일
• 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 위치가 조정됨

2. relative

이전 요소에 연결해 나열한 순서대로 배치되지만 좌표값을 사용하여 위치를 지정할 수 있다.

3. absolute

원하는 위치를 지정해 배치한다. 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소이다.

.position1 {
	position: relative;
    width: 50px;
 }
 
 .position2 {
 	position: absolute;
 }

3. fixed

브라우저 창 기준으로 지정한 위치에 고정해 배치한다. 한번 배치되면 브라우저 창을 스크롤하더라도 계속 고정되어 표시된다.