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