웹문서안의 요소들을 어떻게 배치할지를 정의한다.
position은 상속되지 않는다.
※ offset = left,right, top, bottom 등 위치지정을 의미함
| 속성값 | 내용 |
|---|---|
| static | 기본값, 문서흐름에 따라배치된다. 다른 태그와의 관계에 따라 자동으로 배치된다. 위치를 임의로 설정할 수 없다. top,right,bottom,left 속성을 사용 못한다. float는 사용가능 즉, offset을 무시 (left:10px 등 설정이 무효화됨, 위치지정을 할 수 없다. margin,padding로 거리를 떨어트리거나 하는 방법밖에 없다. |
| relative | 부모요소 또는 앞 요소를 기준으로 위치가 정해진다. static일때의 위치를 기준으로 상대위치를 지정 (자신이 원래있던 위치를 보고 거기서 부터 offset설정) ※ static일경우 왼쪽 10px일 경우, relative 변경해 style="left:10px;" 이면 왼쪽 20px에 위치한다. |
| absolute | 임의로 위치를 지정가능, 절대 좌표로 위치를 지정할 수 있다. 기준은 가장 가까운 부모요소 혹은 조상중에 position이 relative인 요소를 기준으로 정한다. (없으면 body까지 찾아간다.) 즉, 조상중에 relative인 요소가 있으면 그 요소 안에서만 offset이 적용된다.) offset 지정이 없으면 앞에요소 다음에 위치(static 일때와 동일하도록 offset이 자동지정 된다.) |
| fixed | 위치고정, 스크롤과 관계없이 좌측상단을 기준으로 위치를 고정할수 있다. 기준은 브라우저를 기준으로 위치가 정해진다. |
| sticky | 위치따라 동작방식이 달라짐 요소가 임계점(scroll박스기준) 이전에는 relative와같이, 그 이후에는 fixed와 같이 동작한다. 즉, 스크롤이 scroll박스를 벗어나면 그 위치에서 정지하게 된다. scroll 박스 사이에 overflow:hidden이 적용된 요소가 있을경우 sticky속송이 잘 동작 안할수도 있음 ※ IE 에서는 사용못함 |
| inherit | 부모태그의 속성을 상속받는다. |
관계
relative 컨테이너 안에 absolute 태그가 있을경우, relative 기준으로 절대좌표를 계산한다.