[CSS] position

position : block요소로 쌓이는 구조

 

1. static 

- default 속성

- 위치 임의 설정 불가

 

2. relative

- 원래 있던 위치를 기준으로 좌표 지정

 

3. fixed

- 모든 페이지의 같은 위치에 출력

- 상단의 네비게이션 바 등에 사용

- 띄워서 고정되는 느낌임 -> 겹칠 수 있다는 것을 유의해야 함.

 

4. absolute

- 부모의 위치를 기준으로 좌표 지정

div {
	position : static;
    width : 100px;
    height : 100px;
    background-color : red;
}

div span {
	position : absolute;
    top : 10px;
    left : 10px;
}

위의 경우, span은 기준이 div인 것을 알 수 있음.

 

5. sticky

- 인터넷 익스플로어에서는 지원 X, 모바일에서 많이 사용함

- 특정 시점에 고정됨.