CSS position - relative, absolute, fixed

CSS position 속성은 웹 문서 상에서 요소의 위치를 지정해주는 태그입니다. positon 속성에 relative absolute fixed 등의 값을 적용한 후 top right bottom left 를 사용해 최종 위치를 지정할 수 있습니다. 적절히 섞어서 사용하면 주변 환경에 영향을 주지 않고 요소를 배치할 수 있습니다.

positon: relative - 상대적 기준점
positon: absolute - 절대적 기준점
position: fixed - 고정된 기준점

블루 박스에 position: relative 를 설정한 후 left top 를 설정하면 좌측 상단을 기준으로 거리를 띄어 줍니다. 자신의 현재 위치가 기준이 됩니다. right bottom 의 경우 우측 과 바닥면을 기준으로 공간을 띄어 줍니다.

.red {
	  position: relative;
	  left: 100px;
	  top: 50px; 
}

부모요소와 자식요소가 있을 경우 자식요소에게 postion: absolute 를 적용하면 해당 요소는 현재 위치에서 뜨고 자식 요소만큼 height 를 차지하던 부모요소의 높이는 0이 됩니다. (위로 뜬 자식요소의 높이를 인지하지 못함) absolute 된 요소는 어떤 흐름이나 부모요소에도 묶이지 않아서 자유롭게 배치가 가능합니다.

.parent {
}

.chlidren {
	postion: absolute;
}

이때 자속요소에게 left top 값을 지정하면 부모요소 바깥의 창 기준으로 요소가 움직이게 됩니다.

.parent {
}

.chlidren {
	postion: absolute;
	left: 0;
	top: 0;
}

이제 부모요소에게 상대적 기준점 position: relative 를 적용하면, 부모요소를 기준으로 자식요소의 위치가 지정됩니다.

.parent {
	position: relative;
}

.chlidren {
	postion: absolute;
	left: 0;
	top: 0;
}

relative 와 absolute 는 이렇게 같이 사용하는 경우가 많습니다. fixed 의 경우 스크롤 되는 화면에서 상하단에 고정된 메뉴바나 푸터에 적용해서 사용합니다.

자세한 내용은 MDN을 참고하세요.