position
-
웹 페이지를 작업할 때 요소의 위치를 2가지 방법으로 설정합니다.
위치를 설정할때에는 x축과 y축 좌표를 이용하여 설정할 수 있습니다. -
position을 사용할 때에는 '상대위치'로 요소의 위치를 정하거나
'절대위치'로 요소의 위치를 지정할 수 있습니다. -
상대위치 : 태그가 출력된 위치를 기준으로 새롭게 위치를 지정합니다. (상대적으로 지정합니다.)
-
절대위치 : 태그가 0점을 기준으로 새롭게 위치를 지정합니다.
[속성값]
- relative : 상대적으로 위치를 잡습니다. 태그가 출력된 현재 위치를 기준으로 상하 좌우로 움직입니다.
- absolute : 절대적인 위치로 이동합니다. (무조껀 0점을 찾아갑니다.) 부모 박스가 relative라면 부모의 0점으로 이동합니다.
- static : 태그가 위에서 아래로 출력되며(block) 좌표를 인식할 수 없습니다. 기본값입니다.
- fixed : 화면을 기준으로 절대 위치 좌표를 잡습니다. 문서의 길이와는 상관 없이 화면을 기준으로 합니다.
- position을 relative나, absolute나 fixed를 적용하게 되면 그때부터 해당 태그는 좌표를 인식할 수 있게 됩니다.
[좌표속성]
- left : 부모박스 또는 브라우저의 왼쪽을 기준으로 오른쪽으로 좌우로 움직일 수 있습니다. 양수를 쓸 경우 오른쪽으로 이동합니다.
- right : 부모박스 또는 브라우저의 오른쪽을 기준으로 왼쪽으로 좌우로 움직일 수 있습니다. 양수를 쓸 경우 왼쪽으로 이동합니다.
- top : 부모박스 또는 브라우저의 위쪽을 기준으로 왼쪽으로 상하로 움직일 수 있습니다. 양수를 쓸 경우 아래쪽으로 이동합니다.
- bottom : 부모박스 또는 브라우저의 아래쪽을 기준으로 왼쪽으로 상하로 움직일 수 있습니다. 양수를 쓸 경우 위쪽으로 이동합니다.
- position:relative의 경우 left, top 좌표만 사용이 가능합니다.
- position:absolute/fixed의 경우에는 좌표속성을 모두 사용할 수 있습니다.
z-index
- position을 이용해 요소의 위치를 잡을 때 특정 박스끼리 좌표를 이용해 겹칠 수 있습니다.
- 겹쳐져있는 박스의 순서를 바꾸고 싶을 때 z-index 속성을 사용합니다.
- z-index의 값은 단위 없이 숫자만 사용하고, 숫자가 클수록 앞으로 나옵니다.
- z-index의 기본값은 0이고, 9999까지 쓸 수 있습니다.
- 만약 박스들에 z-index가 지정되지 않았다면 모두 기본값으로 0을 갖습니다.
position:sticky
- sticky는 처음에는 relative처럼 원래 출력된 태그 위치에 있다가
특정 섹션(부모)이 나왔을때 fixed처럼 동작하는 속성이다. - 즉, 부모섹션이 브라우저의 윗부분과 만나면 fixed처럼 동작한다.
sticky를 사용하려면
1.부모박스에 반드시 height속성이 있어야 하고
2.부모박스에 overflow속성이 있지 않아야 한다.
