position

css에서 position 속성은 문서 상에 요소를 배치할때 어떤 방식으로 위치를 지정할지를 결정한다.

1. 기본값
   기본 position은 static을 사용하며, 다른 태그와의 관계에 의해 자동으로 배치된다.

.box1 {position : static;}

2. relative: 기본값에 있던 위치를 기준으로 값을통해 위치를 지정할 수 있다.

.box1 {
	left : 20px;
    top : 20px;
	position : relative;
}

3. absolute: 선택한 아이템이 담긴 container의 위치를 기준으로 값을통해 위치를 지정할 수 있다.

.box1 {
	left : 20px;
    top : 20px;
    position : absolute;
}

4. fixed : 스크롤과 상관없이 항상 문서(window) 최 좌측상단을 기준으로 좌표를 기준으로 위치를 지정할 수 있다.

.box1 {
	left : 20px;
    top : 20px;
    position : fixed;
}

5.sticky : 기본값에 있던 위치를 기준으로 스크롤링해도 없어지지않고 원래있던 위치에 그대로 있는다.

.box1 {
	left : 20px;
    top : 20px;
    position : sticky;
}