[css] position - relative, absolute, fixed

position속성

position속성은 요소를 어떻게 배치시킬지를 정하는 속성입니다.
속성값 - static/relative/absolute/fixed

static을 제외한 나머지 속상값들은 top,left,bottom,right를 통해 어디에 배치할지 지정할 수 있습니다.

static - 기본값으로 위치를 지정하지 않는 것과 동일합니다.

relative - 요소를 자신을 기준으로 배치합니다.

selector {
	position: relative; /* 자신을 기준으로 배치 */
    top: 50px; 
    right: 50px; 

absolute - 요소를 위치상 부모요소를 기준으로 배치합니다. 여기서 위치상의 부모요소란 구조상의 부모요소와 다른 개념으로 position속성이 부여된 부모요소를 의미합니다.

부모요소 중에 position이 relative,fixed,absolute 하나라도 있으면 그 부모요소에 의해 절대적으로 움직이게 됩니다. (static제외)

.parent-selector {
	position: relative; /* 기준 */
}
.child-selector {
	position: absolute; /* 배치 */
    bottom: 30px;
    left: 20px;
    right: 20px;
}

fixed - 사용자의 브라우저 창을 기준으로 배치하며, absolute와는 다르게 위치상의 부모요소가 필요하지 않습니다. fixed를 사용하면 브라우저 창을 스크롤해도 움직이지 않고 고정되어 표시됩니다.

selector {
	position: fixed; /*브라우저를 기준으로 배치 */
    top: 20px;
    left: 30px;
}