[UI/UX]coding 기초 - CSS- position

📌position

position을 사용할때에는 '상대위치'로 요소의 위치를 정하거나 '절대위치'로 요소의 위치를 지정할 수 있다.

위치를 설정할때에는 x축과 y축 좌표를 이용하여 설정할 수 있다.

✔️상대위치 : 태그가 출력된 위치를 기준으로 새롭게 위치를 지정한다.(상대적으로 지정한다.)

✔️절대위치 : 태그가 0점을 기준으로 새롭게 위치를 지정한다.

[속성값]

-relative : 상대적으로 위치룰 잡는다. 태그가 출력된 현재 위치를 기준으로 상하 좌우로 움직인다.

-absolute : 절대적인 위치로 이동한다. (무조건 0점을 찾아간다.) 부모박스가 relative라면 부모의 0점으로 이동한다.

-static : 태그가 위에서 아래로 출력되며(block) 좌표를 인식할 수 없다. 기본값.

-fixed : 화면을 기준으로 절대위치 좌표를 잡는다. 문서의 길이와는 상관없이 화면을 기준으로 한다.

• position을 relative나 absolute나 fixed를 적용하게 되면 그때부터 해당 태그는 좌표를 인식할 수 있게된다.

• static은 position의 기본값으로 좌표를 인식할 수 없기 때문에 위치를 설정하려면 margin이나 padding이나 flex를 이용해 위치를 잡을 수 있다.
  즉, position:static은 position속성을 안쓴것과 같다.

• static을 제외한 나머지 속성값을 쓰게 되면 좌표를 인식할 수 있고, 좌표속성에 따라 태그의 위치를 지정할 수 있다.

[좌표속성]

-left : 부모박스 또는 브라우저의 왼쪽을 기준으로 좌우로 움직일 수 있다.
양수를 쓸 경우 오른쪽으로 이동한다.

-right : 부모박스 또는 브라우저의 오른쪽을 기준으로 좌우로 움직일 수 있다.
양수를 쓸 경우 왼쪽으로 이동한다.

-top : 부모박스 또는 브라우저의 위쪽을 기준으로 상하로 움직일 수 있다.
양수를 쓸 경우 아래쪽으로 이동한다.

-bottom : 부모박스 또는 브라우저의 아래쪽을 기준으로 상하로 움직일 수 있다.
양수를 쓸 경우 위쪽으로 이동한다.

• position:relative의 경우 left, top좌표만 사용 가능하다.

• position:absolute의 경우 left, top, right, bottom 모든 좌표 사용 가능하다.

  

📌z-index

---

• position을 이용해 요소의 위치를 잡을때 겹쳐져있는 박스의 순서를 z-index속성으로 바꾼다.
  z-index의 값은 단위 없이 숫자만 사용하고, 큰 숫자를 적용한 요소가 맨 앞으로 나온다.

• z-index의 기본값은 0이고, 9999까지 쓸 수 있다.
  만약 박스들에 z-index가 지정되지 않았다면 모두 기본값으로 0을 갖는다.

  

📌position:sticky

---

sticky는 처음에는 relative처럼 원래 출력된 태그 위치에 있다가 특정 부모 섹션이 나와을때 fixed처럼 동작하는 속성이다.

즉, 부모섹션이 브라우저의 윗부분과 만나면 fixed처럼 동작한다.

★★★★★ 꼭 지켜야하는 규칙★★★★★
sticky를 사용하려면
1. 부모박스에 반드시 height속성이 있어야 하고(auto안됨)
2. 부모박스에 overflow속성이 있지 않아야 한다.